ドラッグ可能な複数のアイテムを1つのドロップ可能なアイテムにのみドラッグできるようにしようとしています。ドロップ可能の外にドロップされた場合は元に戻します。私のコードのほとんどは、1 つのバグを除いて機能します。
ユーザーが項目をドロップ可能にドラッグします。次に、ドラッグアウト (関数を実行) し、ドロップ可能にドロップできません (元に戻すと、ドラッグは以前のドロップ可能に戻ります)。効果的に起こったのは、ドロップ可能オブジェクトがドラッグを受け入れることができるようになったことです (ドラッグが実行されてから)、元に戻すためにドラッグが実際に離れることはありません。
私はこれを数時間解決しようとしており、API を使用しました。元に戻すためのコールバック関数を用意しようとしましたが、ドラッグ可能のドロップ可能を取得する方法が混乱しているため、行き詰まりました。
//revert if not dragged to a draggable.
$( "[id|=drag]" ).draggable({ revert: 'invalid', revertDuration: 350 });
$( ".dropZone" ).droppable({
drop: function(ev,ui) {
$(this).droppable('option', 'accept', ui.draggable); //only accept the current drag.
},
out: function(ev, ui) {
$(this).droppable('option', 'accept', '[id|=drag]');//now you can accept any drag.
}
});
jsFiddle: http://jsfiddle.net/tG6cj/