47

デスクトップからブラウザー ウィンドウにファイルをドラッグ アンド ドロップする機能を実装しようとしています。以下のコードのように、jQuery を使用して 3 つのイベントを HTML 要素にアタッチしました。

$("html").on("dragover", function() {
    $(this).addClass('dragging');
});

$("html").on("dragleave", function() {
    $(this).removeClass('dragging');
});

$("html").on("drop", function(event) {
    event.preventDefault();  
    event.stopPropagation();
    alert("Dropped!");
});

「dragover」および「dragleave」イベントは正常に機能し、ファイルをドラッグするとページ全体に枠線が表示され、ファイルを再度ドラッグすると削除されます。

ただし、「ドロップ」イベントはまったく発生していないようです。ドロップされたファイルは単にブラウザ ウィンドウで開きます。

このイベントが発生しない理由を誰か知っていますか?

ところで、私は最新バージョンの Chrome でこれをテストしており、jQuery 1.10.2 を使用しています。

4

2 に答える 2

23

クリスチャンの解決策に加えて、これは次のように短縮できます。

$('#my-dropzone')
    // crucial for the 'drop' event to fire
    .on('dragover', false) 

    .on('drop', function (e) {
        // do something
        return false;
    });
于 2016-08-25T10:53:58.973 に答える