JQuery UI捕捉到元素中的网格

Question

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

我想将可拖动的div捕捉到drop div中的网格而不是整个页面中的网格.我发现snap属性要捕捉到drop元素,我还发现了grid属性将它捕捉到网格但有没有办法将两者合并？

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

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

Answer 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例子.