web-dev-qa-db-ja.com

jQuery.on（ "drop"）が起動しない

デスクトップからブラウザウィンドウへのファイルのドラッグアンドドロップを実装しようとしています。以下のコードのように、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を使用しています。

javascriptjquerydrag-and-drop
38
TreacleWench

すべてのイベントをキャンセルする必要があります

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

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

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

クリスチャンのソリューションに加えて、これは次のように短縮できます。

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

    .on('drop', function (e) {
        // do something
        return false;
    });
12
JimmyBlu