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!

Answer 1

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.