JQuery UI 捕捉到元素内的网格答案

【问题标题】：JQuery UI snapping to a grid within an elementJQuery UI 捕捉到元素内的网格
【发布时间】：2012-06-15 12:47:04
【问题描述】：

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

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

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

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

【问题讨论】：

标签： jquery jquery-ui drag-and-drop

【解决方案1】：

您可以使用 droppable 的 over 和 out 方法来检测 draggable 何时在其上方，然后仅在该点实现 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.

【讨论】：

没错。 False 是网格的默认值，因此通过在 50,50 之后设置回 false，您实际上是在重置该选项。