これは簡単に再現できる問題です。このjsFiddleを確認してください:http://jsfiddle.net/MichielCM/XEC9g/
<ul id="list1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
<ul id="list2">
<li>Hover me over the items</li>
</ul>
<div id="status"></div>
List1 にはドロップ ターゲットが存在します。高さが最大に設定されており、オーバーフローは非表示になっています。List2 には、ドラッグ可能な項目が 1 つだけあります。
$("#list1 li").droppable({
greedy: true,
tolerance: "pointer",
over: function(event, ui) {
$("#status").text(
"Hovering over: ".concat($(this).text())
);
}
});
$("#list2 li").draggable();
これで、リスト 2 からアイテムをドロップ可能なリスト (リスト 1) にドラッグすると、各ターゲットの「over」イベントがアクティブになります。これは、高さが固定されているために表示されない非表示のアイテムでも発生します。これらのアイテムに対しても「ドロップ」イベントがトリガーされるため、実際にはアイテムを目に見えないターゲットにドロップすることができます!
これを防ぐエレガントな方法はありますか?ありがとう。