Geek Answers Handbook

JQuery droppable: removing outside a div?

Is there a way I can get jQuery to execute a function when you drag an element outside of a div with the ability to switch?

Say we have drag-and-drop or sortable items in a div, and you want them to be deleted if they were reset outside their parent div.

I know that there is an "out" event, but it works as soon as you drag an element outside the div, and not when you drop it (release the mouse button).

+7
jquery user-interface droppable
source share
3 answers

Finally, we got the right solution, although a bit “hacked”. What I do is set the foreground div using draggables as droppable, but use the dropover and dropout functions to determine if the element is outside the foreground div. When it is outside the div, I bind the mouseup event to execute the drop function. When I return, I will unbind the mouseup event so that it does not fire.

Because when dragging and dropping, I already hold the mouse button, releasing it in the same way as dropping what I have in my “hand”.

$("#foregroundDiv").droppable({ accept: ".draggableThingy", tolerance: "pointer", out: function(event, ui) { $(ui.helper).mouseup(function() { doSomethingTo(ui.draggable); }); }, over: function(event, ui) { $(ui.helper).unbind("mouseup"); } });
+8
source share

Why not wrap all the elements with another droppable div and then check there?

How about if the user deleted it outside the browser window? Do you find it too?

+1
source share

I solved this in a rather "hacked" way: made a table with the contents of a div in the center and made all other cells of the table inaccessible. In essence, this means that you can go beyond the center of the div without any problems, but this is still far from the best way to do this.

If anyone has a better way, please tell me.

0
source share

More articles:


All Articles