Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery UI - Draggable/droppable snap to parent div?

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!

like image 404
Joey Morani Avatar asked Mar 17 '12 01:03

Joey Morani


1 Answers

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.

like image 98
Gary Kerr Avatar answered Oct 02 '22 17:10

Gary Kerr