JQuery UI捕捉元素内的网格

Question

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

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

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

我能想到的唯一的另一个解决方法是用很多更小的单元格填充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 example。