HTMLでウィンドウ外へドラッグした際にFirefoxでdragleaveイベントを検出する方法

Firefoxでウィンドウ外へのドラッグを検出する問題

HTML5のドラッグ＆ドロップAPIを扱う際、Firefoxではユーザーがウィンドウの外へドラッグした瞬間にdragleaveイベントを正しく検出するのが難しいという課題があります。

この問題を解決するには、dragenterイベントとdragleaveイベントがどの要素で発生したかを追跡する必要があります。個々の要素に対してdragenterやdragleaveをリスンすると、その要素自身のイベントだけでなく、子要素で発生したイベントまで捕捉してしまう点に注意が必要です。これがイベントの検出を複雑にしている主な原因です。

解決策：draghoverプラグインの実装

以下は、jQueryを使ってドラッグの進入・退出を正確に追跡するカスタムプラグインの実装例です。要素のコレクションを管理することで、ドラッグが本当にウィンドウから出たのかどうかを判定できます。

$.fn.draghover = function(options) {
    return this.each(function() {
        var collection = $(),
        self = $(this);
        self.on('dragenter', function(ev) {
            if (collection.length === 0) {
                self.trigger('draghoverstart');
            }
            collection = collection.add(ev.target);
        });
        self.on('dragleave drop', function(ev) {
            collection = collection.not(ev.target);
            if (collection.length === 0) {
                self.trigger('draghoverend');
            }
        });
    });
};

仕組みの解説

このプラグインは次のようなロジックで動作します。

dragenterイベント時： 追跡中の要素コレクションが空の状態（つまりドラッグがまだ領域外にあった状態）でdragenterが発生すると、draghoverstartイベントを発火します。その後、イベントの発生元要素をコレクションに追加します。

dragleave / dropイベント時： イベントの発生元要素をコレクションから除外し、コレクションが空になった時点でdraghoverendイベントを発火します。これにより、子要素間を移動しているだけの段階では誤って「ウィンドウから出た」と判定されることを防げます。

イベントのリスン方法

実装したプラグインは、以下のようにwindowオブジェクトに対して適用し、カスタムイベントを受け取ることができます。

$(window).draghover().on({
    'draghoverstart': function() {
        alert('ウィンドウ内にドラッグされました');
    },
    'draghoverend': function() {
        alert('ウィンドウ外にドラッグされました');
    }
});

この方法を使えば、Firefoxをはじめとするブラウザでも、ドラッグ操作がウィンドウに入ったタイミングと出たタイミングを確実に検出できるようになります。ファイルのドラッグ＆ドロップアップロード機能などで、ドロップ領域のハイライト表示を切り替えたい場合に特に有効です。