jQuery UI捕捉到元素内的网格

我有两个div，并且正在使用JQueryUI库将一个div放到另一个div中。

我想将可拖动的div捕捉到放置div内的网格，而不是整个页面上的网格。我发现snap属性可以捕捉到drop元素，我还发现了grid属性可以捕捉到一个grid，但是有什么方法可以将两者结合起来？

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

我能想到的唯一其他解决方法是用很多较小的snap div填充drop div，这是我不喜欢的方法!

最佳答案

您可以使用droppable的over和out方法来检测可拖动对象何时在其上，然后仅在该点实现grid参数。

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

jsFiddle example 。

关于jQuery UI捕捉到元素内的网格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11050916/