jquery - JQuery UI 捕捉到元素内的网格

Question

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

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

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

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

Answer 1

您可以使用 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 示例。