Cancel Drag and Drop

Question

I have a draggable element (jquery-ui). How can I cancel the current draggig based on some restrictions? In other words, I want to limit the possible movements of this draggable element, but it is more complex, then based only on the axis or parent (containment).

How can i do this?

Answer 1

Try using a drag event handler with event.preventDefault ();

For instance:

$(*selector*).draggable({ drag: function(event) { if (*condition*) { event.preventDefault(); } } }); 

Answer 2

You cannot cancel the fall. The only solution I have so far is to redraw all the dragged objects ...

This is for applying the confirmation dialog to the error and looks something like this:

 fruitbowl.draw() // my routine which puts draggable elements into the DOM $("trash").droppable({ drop: function(ev, ui){ $("#areyousure-dialog") .data('fruit',ui.draggable) // passes the dragged el .dialog("open") } } $("#areyousure-dialog").dialog({ buttons: { 'Yes I\'m sure': function(){ var fruit = $(this).data('fruit') fruit.remove() fruitbowl.draw() $(this).removeData('fruit').dialog('close') }, Cancel: function(){ fruitbowl.draw() $(this).removeData('fruit').dialog('close') } } 

Open for improvement, not sure if this is the best way to pass the dropped item into the dialog, but works for me.