要素内のグリッドにスナップするJQuery UI

Question

2つのdivがあり、JQueryUIライブラリを使用して1つのdivを別のdivにドロップしています。

ドラッグ可能なdivを、ページ全体のグリッドではなく、ドロップdiv内のグリッドにスナップしたいとします。私はドロップ要素にスナップするためのスナップ属性を見つけました。グリッドにスナップする属性も見つけましたが、2つを組み合わせる方法はありますか？

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

私が考えることができる唯一の他の回避策は、私が気に入らないアプローチであるたくさんの小さなスナップdivでドロップdivを設定することです。

Answer 1

drappableの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。