ユーザーが #droparea にファイルをドロップできる HTML5 ドラッグ アンド ドロップ スクリプトがあります。#droparea div には、div 要素でもある子要素があります。
<div id="droparea">
<div id="showif_no_dragover">Drag files here!</div>
<div id="showif_dragover">Drop the files!</div>
</div>
関連する javascript/jquery は次のとおりです。
var droptarget = "#droparea";
$(droptarget).live('dragenter', dragEnter);
$(droptarget).live('dragleave', dragExit);
$(droptarget).live('dragover', nothing);
$(droptarget).live('drop', dropGo);
(副次的な質問:ここで .live()、.on()、または .bind() を使用する必要がありますか?)
ここにいくつかの追加コードを含むサンプル jsFiddle を作成しました: http://jsfiddle.net/PwFr9/3/
コンソールを見ると、#droparea 内でファイルをドラッグすると、ドラッグがまだ #droparea 内にあるにもかかわらず、dragenter() と dragleave() が複数回呼び出されることがわかります。子要素 (#child1 と #child2) を削除すると、子要素がなくなるため問題はなくなります。子要素を保持し、ドラッグ イベントを台無しにしないようにするにはどうすればよいですか?
何の助けもなく、Stackoverflow と Google を何時間も検索しました。Stackoverflow でこの質問を見つけました: How to keep child elements from interfering with HTML5 dragover and drop events? なぜそれが機能するのかわかりません。
2 つの div 要素を重ねて配置しようとしました (CSS の配置を介して)。一番上の div にはドラッグ イベントがアタッチされていますが、一番下の div には子要素があります。このアプローチは好きではありません。ページの残りの部分では機能せず、一番下の div でのマウス クリック操作が許可されないためです。