jQueryの：複数の重複のターゲットのドロップアイテム

Question

JSFiddle（デモ）：http://jsfiddle.net/mr_goodcat/9a7qv/5/

私はアイテムが複数の重複のターゲットに落下状況を、持っています。問題は、発生したときに1つのドロップハンドラしか呼び出されないことです。コードが次のような場合：

$(document).ready(function() { 
    $("#droppable1").droppable(); 
    $("#droppable2").droppable(); 
    $("#droppable3").droppable(); 

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

    $("#droppable1").bind("drop", drop); 
    $("#droppable2").bind("drop", drop); 
    $("#droppable3").bind("drop", drop); 
}); 

function drop(e, ui) { 
    $("#result").prepend("<p>" + ui.draggable.attr("id") + " ON " + $(this).attr("id") + "</p>"); 
} 

結果divに「draggable ON droppable1」と表示されます。 （intresting：＃droppable3が上部にあります）。

質問：ドロップ可能イベントをすべてのドロップ可能オブジェクトで呼び出す方法（可能な場合）

Answer 1

私は個人的にjQueryのドラッグアンドドロップ機能が不完全であることがわかりました。あなたが望むものを正確に行うことを可能にするこのjQuery拡張を見てください。このリンクには、あなたが望むものを正確に行うデモがあります。

http://threedubmedia.com/code/event/drop

Answer 2

"ドロップ" 真JavaScriptのイベントではありません。 jQueryが行うことは、すべての削除可能な要素を定義された順序でループし、削除された要素の座標に一致する最初の要素を返します。おそらくあなたはそれのために独自の関数を定義することができます。あなたのドロップ機能は、スタックの順番でドロップゾーンをチェックすることで実行する必要があります。私は要素のスタック順序をチェックする方法はわかりませんが、あなたが使用しているブラウザがcss2仕様を尊重すれば、それを予測できます。

また、すべてのドロップゾーンが相対的に配置されている場合は、各要素のZ-インデックスとそれらが宣言された順序を確認するだけで十分です。代わりに、ページ上に要素を積み重ねるために、余白やその他の方法を使用すると、css2スタッキング仕様を読み込む必要があります。 http://www.w3.org/TR/CSS2/zindex.html

ただし、あらかじめわかっていて、変更されていない場合は、対応するスタックの順序でフローティングゾーンを初期化できます。あなたの例では：

$("#droppable3").droppable(); 
$("#droppable2").droppable(); 
$("#droppable1").droppable();