ドロップ可能な DIV の外にアイテムをドラッグしたときに、jQuery に関数を実行させる方法はありますか?
div にドラッグ可能またはソート可能なアイテムがあり、それらが親 div の外にドロップされた場合にそれらを削除したいとします。
「out」イベントがあることは知っていますが、アイテムをドロップしたとき(マウスボタンを放したとき)ではなく、アイテムをdivの外にドラッグするとすぐに機能します。
ドロップ可能な DIV の外にアイテムをドラッグしたときに、jQuery に関数を実行させる方法はありますか?
div にドラッグ可能またはソート可能なアイテムがあり、それらが親 div の外にドロップされた場合にそれらを削除したいとします。
「out」イベントがあることは知っていますが、アイテムをドロップしたとき(マウスボタンを放したとき)ではなく、アイテムをdivの外にドラッグするとすぐに機能します。
少し「ハッキー」でもありますが、ついにこれに対する適切な解決策が得られました。ドラッグ可能なものをドロップ可能なものとしてフォアグラウンドdivを設定しますが、ドロップオーバーおよびドロップアウト機能を使用して、アイテムがフォアグラウンドdivの外側にあるかどうかを判別します。divの外にある場合は、mouseupイベントをバインドしてドロップ機能を実行します。それが戻ってきたら、mouseupイベントのバインドを解除して、起動しないようにします。
ドラッグするときはすでにマウスボタンを押しているので、離すのは「手」にあるものをドロップするのと同じです。
$("#foregroundDiv").droppable({
accept: ".draggableThingy",
tolerance: "pointer",
out: function(event, ui) {
$(ui.helper).mouseup(function() {
doSomethingTo(ui.draggable);
});
},
over: function(event, ui) {
$(ui.helper).unbind("mouseup");
}
});
すべての要素を別のドロップ可能な div でラップして、そこでチェックしないのはなぜですか?
ユーザーがブラウザ ウィンドウの外にドロップした場合はどうなるでしょうか。これも検討してみませんか?
これをかなり「ハッキー」な方法で解決しました。中央にコンテンツ div を含むテーブルを作成し、テーブルの他のすべてのセルをドロップ可能にしました。基本的に、これは問題なく中央の div の外にドロップできることを意味しますが、それでも良い方法とは言えません。
誰か良い方法があれば教えてください。