CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-draggablejquery-ui-droppable
alemangui
alemangui

Reputation: 3655

jQuery UI droppable 'drop' event to wait for revert

I am developing some simple drag-drop interactions with jQueryUI. Under some conditions, I would like the dragged item to go back to its original place (revert) and then shake. I placed the shake in the drop event of the droppable object, but it doesn't seem to wait for the revert to be finished.

What's worse, sometimes it shakes before starting to revert to the original position, other times it shakes after the full revert has been done, and other times the shake gets caught up in the middle. It's not consistent.

Is there any way to execute the drop event of the droppable object after the draggable has completed its revert?

See this JSFiddle for an example: http://jsfiddle.net/sbQUE/

In other words, if I set up the droppable as follows:

this.$el.droppable({
    drop: someFunction
});

...the executed function is:

someFunction: function(ev, el){
    $(el.draggable).effect('shake');
}

... and the draggable object that will fall on the droppable is set up like:

this.$el.draggable({
    revert: true,
    revertDuration: 0 // or any number for that matter
});

How can I make sure the "someFunction" callback will be executed after the draggable is back in its original place thanks to the revert option?

Note: I tried looking for some sort of after revert callback or event but it doesn't exist (at least not in jQueryUI's documentation).

Upvotes: 2

Views: 2960

Answers (1)

Shaunak
Shaunak

Reputation: 18028

If you can make jsfiddle for you example, I can apply this to your code, but generally this can be accomplished in jquery using system of promise:

You will have to do something like this:

javascript:

 $(function () {
     $("#draggable").draggable({
         revert: "valid"
     });

     $("#droppable").droppable({
         activeClass: "ui-state-hover",
         hoverClass: "ui-state-active",
         drop: function (event, ui) {
             setTimeout(function () {
                 $("#draggable").promise().done(function () {
                     $("#draggable").effect('shake', {}, 500);
                 });
             }, 100);
         }
     });
 });

Here is a solved jsfiddle

Incase you are wondering about the setTimeout before .promise() that is to make sure the revert animation has been activated. Then promise() will wait until it is executed.

Upvotes: 3

Related Questions