CODEWITHSUNDEEP
jqueryjquery-ui-draggablejquery-ui-droppable
user1470118
user1470118

Reputation: 412

jQuery draggable - change the listener

I'm having a problem with the draggable/droppable objects. I have the draggable object set to be about 400px wide and 50px tall. The droppable is the same height, but the width is only about 80px.

My problem comes in when you try to drop the object onto the droppable. In order for the draggable to actually fire the drop listener the draggable has to almost be perfectly centered over the droppable in order for it to actually work and to fire the drop event listener.

Is there a way to modify the code so that it will use the corners to test the drop? It would appear that it tests the draggable objects placement based on its width over the droppable to detect if it's being dropped. I need to modify this so that it listens to the outer edges of the draggable object instead.

For instance if the object being dragged in the image below were to be dropped it would snap to the object titled "Step 1". Right now, that draggable would have to be half way over in order to actually snap to the droppable object.

enter image description here

Upvotes: 0

Views: 731

Answers (1)

Jason M. Batchelor
Jason M. Batchelor

Reputation: 2951

If you're using jQuery UI's Draggable/Droppable code, have you looked at setting this parameter? http://api.jqueryui.com/droppable/#option-tolerance ... it looks like you can set it to "touch" which means the droppable area is activated whenever the draggable touches with any part of itself the drop zone.

Upvotes: 1

Related Questions