HTML5ドラッグアンドドロップ：dropの前にdragLeaveイベントが発火する問題の解決方法

問題：dropイベントの前にdragLeaveが発火してしまう

HTML5のドラッグアンドドロップAPIを実装していると、dragLeaveイベントがdropイベントより先に発火してしまい、意図した通りに動作しないことがあります。特に子要素にマウスカーソルが移動した瞬間にもdragLeaveが発生するため、ドロップ領域のハイライト表示などがちらつく原因にもなります。

この問題は、dragOverイベントハンドラ内でstopPropagation()を呼び出すことで解決できます。

onDragOver = function(e) {
    e.stopPropagation();
}

onDrop = function(e) {
    /* ドロップ時の処理 */
}

dropイベント側の実装例

dropイベント側では、まずpreventDefault()でブラウザのデフォルト動作（リンクの開閉など）をキャンセルし、dataTransferから転送データを取得して処理を行います。以下は、ドラッグした要素をドロップ先に移動させる典型的な例です。

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

実装時の注意点

• イベントオブジェクトの使い方に注意： サンプルコードでは引数のevとグローバル変数のeventが混在していますが、確実に動作させるには引数で受け取ったイベントオブジェクト（上記の例ではev）に統一することを推奨します。
• dragOverでのpreventDefault()は必須： dragOverイベントハンドラ内でpreventDefault()を呼び出さないと、その要素はドロップ先として認められず、dropイベント自体が発生しません。
• stopPropagation()との併用： stopPropagation()によってイベントの伝播を止めることで、子要素間を移動する際の不要なdragEnter/dragLeaveの連続発火を抑えられます。

これらのポイントを押さえることで、dragLeaveの意図しない発火による不具合を防ぎ、安定したドラッグアンドドロップ操作を実現できます。