javascript - ドロップ後のドラッグ可能の動作を変更する

Question

要素は、ドロップする前に両方向 (x および y) にドラッグできます。ドロップ後は、一方向 (y 軸) にのみドラッグ可能にする必要があります。両方向にドラッグできるクラスを削除してから、一方向にドラッグできる新しいクラスを追加してみました。ただし、これは機能しません。ドロップ後、新しいクラスが追加された後でも、要素を両方向にドラッグできます。助けてくれてありがとう。

Answer 1

dropドロップ可能なコンテナからイベントをキャプチャします。destroy を発射して、ドラッグ可能なものを殺します。

$("#bar").draggable("destroy");

再バインドして、軸が Y のみであることを示します

$('#bar').draggable({axis: 'y'});

すべてを一緒に入れて：

$("#droppable").droppable({
    drop: function (e, ui) {
        var draggable = ui.draggable;
        if ($(draggable).data('dropped')) {
            //this happened during only the "Y" axis constraint
            //do whatever
        } else {
            $(draggable).draggable('destroy');
            $(draggable).data('dropped', true)
            $(draggable).draggable({
                axis: 'y'
            });
        }
    }
});
$("#draggable").draggable();

動いている