1

jQuery UI の状態に問題があります。

コードは次のとおりです。

$(function() {
    $("#draggable2").draggable({ 
        snap: ".ui-widget-header",
        snapMode: "inner", 
        revert: true
    });
});

私の質問：

ui-widget-headerにスナップした場合にドラッグ可能なアイテムが元に戻らないようにif ステートメントを使用するにはどうすればよいですか?

どうもありがとう ;）

4

1 に答える 1

0

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

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

snapElements という配列がウィジェット データ内に保持され、次のようになります。

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

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

snapElements配列はイベントごとに更新されるため、ハンドラーdragでは常に最新です。dragそこdraggableから、関連付けられた要素から data() を使用してウィジェット インスタンスを取得するだけです。

この配列を念頭に置いて、次のようなコードを記述して、ターゲットにスナップされたかどうかを判断できます。

$("#draggable2").draggable({
    snap: ".ui-widget-header",
    snapMode: "inner", 
    revert: true
    stop: function(event, ui) {
        var draggable = $(this).data("draggable");
        $.each(draggable.snapElements, function(index, element) {
            if (element.snapping) {
                //i can't quit figure out how to stop the reverting from here, but here's you condition.
                console.log("Snapped !!");
            }
        });
    },
});

ああ、私はこれが役に立つことを願ってオンラインで見つけました. 関数のコールバックを元に戻します。

于 2013-06-13T14:38:27.607 に答える