16

ドラッグ可能なものを受け入れるjQuery UIドロップ可能があります。特定の条件が満たされた場合にドロップ アクションを許可しないようにしたい。

ドロップ アクションをキャンセルして、元に戻すようなアクションを実行するにはどうすればよいですか?

4

1 に答える 1

30

acceptドロップ可能なウィジェットのオプション:

セレクターに一致するすべてのドラッグ可能要素が受け入れられます。関数が指定されている場合、カスタム フィルターを提供するために、ページ上の各ドラッグ可能オブジェクトに対して関数が呼び出されます (関数の最初の引数として渡されます)。ドラッグ可能なものを受け入れる必要がある場合、関数は true を返す必要があります。

ドラッグ可能なオプションと組み合わせると、revert必要なものが得られます。

$(".draggable").draggable({
    revert: 'invalid'
});

$("#droppable").droppable({
    accept: function(el) {
        /* This is a filter function, you can perform logic here 
           depending on the element being filtered: */
        return el.hasClass('acceptable');
    }
});

この特定の例では、 を記述することもできることに注意してください。accept: ".acceptable"これにより、ドロップ可能オブジェクトは class を持つ要素のみを受け入れるようになりacceptableます。別のオプションは、カスタム イベントが発生したときに、acceptable必要に応じてクラスを適用または削除することです。

例を次に示します: http://jsfiddle.net/andrewwhitaker/rUgJF/3/

下部には、「許容範囲」のオンとオフを切り替えるリンクがあります。

于 2011-02-19T15:24:24.843 に答える