JQuery UI snapping to a grid within an element

drag-and-drop, jquery, jquery-ui

Solution

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.

Problem

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!

Original source