jQuery UI - Draggable/droppable snap to parent div?

jquery jquery-ui jquery-ui-droppable
Joey Morani picture Joey Morani · Mar 17, 2012 · Viewed 7.3k times · Source

Can anyone help me with this bit of code: http://jsfiddle.net/tVzq9/2/

I'm trying to get the div '.boxArt' to snap to the parent div '.drop', but in the same way as it reverts (so it's smooth). At the moment it'll drop onto the div but won't fit it properly. Using "tolerance: 'fit'" for the drop div doesn't work as it's very hard to position exactly on it. Thanks for the help!

Answer

Gary Kerr picture Gary Kerr · Mar 17, 2012

Here's a solution: http://jsfiddle.net/awsFU/

Use the drop event of the droppable to handle the animation of the draggable onto the droppable. Note that the drop callback function receives two parameters: event and ui. The draggable object is accessed via the ui parameter (ui.draggable) inside the drop callback. Then you can calculate the new position of the draggable from the current offsets of the draggable and droppable.

Related questions

jQuery Droppable, get the element dropped

A small question hopefully with a simple answer, I am using jQuery draggable and droppable to place items into a dock. Using the below code for the drop. $("#dock").droppable({ drop: function(event, ui) { //Do something to the element dropped?!? } }); …

Read More
How to get jQueryUI drag\drop working with touch devices

This is one situation where I hope someone replies to tell me I'm an idiot. But I continue to be amazed that jQueryUI drag\drop doesn't work with touch devices. I have not tested them all but I have tried …

Read More
How do I highlight a droppable area on hover using jquery ui draggable

I actually have two questions, the on in the title being the main one. I have multiple div elements on the page marked as droppable. Inside these div elements I have spans that are marked as draggable. I want it …

Read More