jQuery: draggable / droppable - Cancel the revert effect on drop
December 19th, 2008 by jeremychoneIf you want to have the “revert” effect only on some condition when performing the drop, here is how to do it:
This example is based on http://docs.jquery.com/UI/Droppable
$(".block").draggable({
helper: 'clone',
revert: true
});
$(".drop").droppable({
accept: ".block",
drop: function(ev, ui) {
//... logic to accept the drop ...
var dropOk = true; //harcoded for simplicity
if (dropOk){
//to cancel the revert effect, just remove the helper
ui.helper.fadeOut();
//... any logic ...
}else{
alert("dropped failed");
//revert effect will be executed (as planned)
}
}
});
2009-05-05: Actually, should use the revert=’invalid’ to accomplish the same effect. This method is still interesting to have more control on the ui helper.
March 27th, 2009 at 4:27 am
Great tip Jeremy. Surprised that not a lot have commented about this effect, given that it is non-obvious.
How did you discover that I wonder?
March 27th, 2009 at 1:33 pm
@Hady, Thanks, took me a little while, but I really wanted to do it.
April 6th, 2009 at 1:34 pm
Thanks. This isn’t exactly clear on the API page.
July 22nd, 2010 at 9:44 am
Thanks for this. I was genuinely baffled about how to do get this to work correctly.
February 1st, 2011 at 2:41 pm
I think it would be nice if the jQuery UI team created an option that we can set in the drop event handler to cancel the drop if we wanted to, or perhaps by specifying a function which will be called by the widget to determine if the drop is valid or not.
Anyway, I’m glad I found this post!