Geek asks and answers

JQuery UI snap to grid inside element

I have two divs and I use the JQueryUI library to delete one div in another.

I want to snap the draggable div to the grid in the div frame, not the grid throughout the page. I found the binding attribute to snap to the drop element, I also found the grid attribute to snap it to the grid, but is there a way to combine the two?

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

The only other workaround I can think of is to populate the drop div with a lot of small dividers that I don't like!

+5
source share
1 answer

You can use the droppable over and out methods to detect when the dragged object was on top of it, and then implement the grid option 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 .

+8
source

More articles:


All Articles