5

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

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

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

私が考えることができる他の唯一の回避策は、ドロップ div に多くの小さなスナップ div を設定することですが、これは私が好きではないアプローチです!

4

1 に答える 1

8

ドロップ可能オブジェクトの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の例。

于 2012-06-15T14:57:28.237 に答える