私は gwt と gwt-dnd (ドラッグ アンド ドロップ用の素晴らしいライブラリ) を使用しています。
別のものと重複する dropTarget ( div) があり、ライブラリはドロップ操作のために下のものを選択します。その理由は、選択が次の基準で行われるためです。
指定された location にある最も深い DOM 子孫ドロップ ターゲットを表す DropController を決定します
(x, y)
。
これは、DropTargets の降順には適していますが、次のような階層には適していません。
<body>
<div id="a">
<div id="b">
<div id="c">
<div id="DropTarget_D"></div>
</div>
</div>
</div>
<div id="1" style="position:absolute; z-index: 1; top:0; left:0">
<div id="DropTarget_2"></div>
</div>
</body>
デモ: http://jsfiddle.net/rxwMB/
(投稿の最後にある) コードからわかるように、この場合、DropTarget_2 が上に表示されていても、DropTarget_C が使用されます (「最も深い」ため)。
2 つのコンポーネントが与えられた場合、どちらが一番上にあるのか、どうすればわかりますか?
選択を行うコードは次のとおりです。
private int compareElement(Element myElement, Element otherElement) {
if (myElement == otherElement) {
return 0;
} else if (DOM.isOrHasChild(myElement, otherElement)) {
return -1;
} else if (DOM.isOrHasChild(otherElement, myElement)) {
return 1;
} else {
// check parent ensuring global candidate sorting is correct
Element myParentElement = myElement.getParentElement().cast();
Element otherParentElement = otherElement.getParentElement().cast();
if (myParentElement != null && otherParentElement != null) {
return compareElement(myParentElement, otherParentElement);
}
return 0;
}
}
dropTarget は、この関数を使用して順序付けされた順序付きリストから選択されます。リストに DropTarget_D と DropTarget_2 のみが含まれ、両方が条件を満たしている場合、最初のものが選択されます (DropTarget_2 に含まれていても)。