JQuery UI snapping to a grid within an element

Question

I have two divs, and I'm using the JQueryUI library to drop one div into another.

I want to snap the draggable div to a grid within the drop div rather than a grid across the entire page. I have found the snap attribute to snap to the drop element, I've also found the grid attribute to snap it to a grid but is there any way to combine the two?

$( "#draggable" ).draggable({ grid: [ 50, 50 ] });

The only other workaround I can think about are to populate the drop div with lots of smaller snap divs which is an approach I don't like!

j08691 · Accepted Answer · 2012-06-15 14:57:28Z

You could use the droppable's over and out methods to detect when the draggable was over it, and then implement the grid parameter only at that point.

$("#draggable").draggable(); $("#snaptarget").droppable({ over: function(event, ui) { $("#draggable").draggable({ grid: [50, 50] }); }, out: function(event, ui) { $("#draggable").draggable("option", "grid", false); } });

jsFiddle example.

That's right. False is the default value for the grid, so by setting to back to false after 50,50, you're essentially resetting that option.

Collectives™ on Stack Overflow

JQuery UI snapping to a grid within an element

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related