16

私は、他の要素にスナップする必要があるいくつかのドラッグ可能な要素に取り組んでい".classes"ます"#class_id". ドラッグ可能な要素のドラッグが完了したら、ドラッグ可能な要素がどの「.classes」にスナップしたかを調べたいと思います。

ドラッグされた要素の現在の位置に基づいて最も近い要素を計算できると思いますがjQuery、スナップが機能することを確認するために何らかの変数を保持する必要があるため、力ずくよりも簡単な方法があるはずです。

助言がありますか？ありがとう！

4

1 に答える 1

30

jQueryUIは「スナップされた」要素の内部「状態」を保持しますが、それを取得するには少し作業が必要です。

イベントのイベント ハンドラーを定義する必要がありますstop(ドラッグ可能なオブジェクトのドラッグが停止したときに呼び出されます)。

と呼ばれる配列snapElementsは、ウィジェット データ内に維持され、次のようになります。

[ 
    { 
        height: 102, 
        item: { /* DOM element */ }, 
        left: 10, 
        snapping: false, 
        top: 10, 
        width: 102 
    }, ...
]

ここで本当に気にかけているのは、itemandsnappingプロパティです。snappingアイテムが現在ドラッグ可能なオブジェクトに「スナップ」しているかどうかがわかります。

この配列を念頭に置いて、次のようなコードを記述して、現在「スナップ」しているスナップ可能なターゲットを特定できます。

$(".draggable").draggable({
    snap: ".snap",
    stop: function(event, ui) {
        /* Get the possible snap targets: */
        var snapped = $(this).data('draggable').snapElements;

        /* Pull out only the snap targets that are "snapping": */
        var snappedTo = $.map(snapped, function(element) {
            return element.snapping ? element.item : null;
        });

        /* Process the results in the snappedTo array! */
    }
});

最終結果が配列であり、単一の DOM 要素ではない理由は、jQueryUI が実際には十分にスマートで、draggable2 つの「スナップ可能な」要素をスナップしたことを認識できるからです。

これらすべてが実際に動作していることを示す実際の例を次に示します: http://jsfiddle.net/andrewwhitaker/uYpnW/5/

それが役立つことを願っています。

于 2011-03-03T13:14:15.357 に答える