JQuery UI 捕捉到元素内的网格

Question

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

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

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

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

Answer 1

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

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

<强> jsFiddle example 。