JQuery draggable revert and stop event

Question

First question, so please :)

What I'm trying to do is call the function when the user releases the dragged file and until the return animation is complete.

As far as I can see, the stop event is fired only when completion is complete. I tried passing the function to the return function for drag and drop, but it doesn't seem to work. Here is some of my code to demonstrate;

$("a").draggable({ helper:function(){ return $("<div/>",{id:"mydrag",text:"link"}).appendTo("body"); }, revert:function(evt,ui){ // $("#mydrag").fadeOut("slow"); return true; }, stop:function(evt,ui){ console.log("fin"); } }); 

If I uncomment the first line of the returned function - fadeout - then the element disappears, but does not return. The console only registers the fin when the final animation is complete.

Can anyone help me? Needless to say, I had a lot of answers for Googled, but no luck.

Buster

Answer 1

First, according to this blog, an undocumented revert callback accepts only one argument (drop socket object or boolean false if the drop was rejected).

Now the problem is that draggable uses animate() internally to move the helper. Apparently, this animation enters the queue and starts only after the fadeOut effect is fadeOut .

One way to achieve the desired result is to call animate() yourself, for example:

 revert: function(socketObj) { if (socketObj === false) { // Drop was rejected, revert the helper. var $helper = $("#mydrag"); $helper.fadeOut("slow").animate($helper.originalPosition); return true; } else { // Drop was accepted, don't revert. return false; } } 

This allows the draggable helper to disappear when it is returned.

You can check this solution here .