デスクトップからブラウザにファイルをドラッグしたときにトリガされるJavascriptイベントとは何ですか？

Question

Gmailのようなファイルアップロードシステムを実装しようとしています。私はすでにすべてのFileupload/AJAXの問題を完了しており、完璧に動作します。私が持っている唯一の問題はユーザーフィードバックです。

例えば、Gmailで、ファイルをブラウザにドラッグすると（IE9 +ユーザと仮定して）、ファイルがドロップされるようにポップアップする領域があります。これはJavaScriptイベントですフレームワーク（Jqueryと言う）でキャプチャされているので、ドロップ領域でクールなアニメーションを作成できます。

私の質問は簡単です。これを行うにはどのようなイベントをキャプチャする必要がありますか？何か案は？私はそれを間違っているのですか？

Answer 1

メインイベントはちょうどdropです。

また、dragenterとdragleaveを処理する必要があります。そうしないと、ドロップ操作によってドロップされたファイルが読み込まれます。場合によってはdragoverもご覧ください。

私はそうのように、これらのハンドラを登録するいくつかのコードを持っている：

var $dz = $('#dropzone'); 
$dz.on({ 
    dragenter: dragenter, 
    dragleave: dragleave, 
    dragover: false, 
    drop: drop 
}); 

function dragenter() { 
    $dz.addClass('active'); 
}; 

function dragleave() { 
    $dz.removeClass('active'); 
}; 

function drop(e) { 
    var dt = e.originalEvent.dataTransfer; 
    if (dt) { 
     var files = dt.files; 
     ... 
    } 
    $dz.removeClass('active'); 
}; 

この場合dragenterとdragleaveハンドラはものがそれにドラッグされているときだけでドロップゾーンの外観を変更することがあります。

Answer 2

これはdropと呼ばれ、イベントオブジェクトから必要なプロパティはoriginalEventプロパティになります。

$(element).on("drop",function(e){ 
    console.log(e.originalEvent) 
}); 

私の記憶が正しければ、あなたも、それがドロップイベントを発射するために、同じ要素上のdragEnterとdragleaveのバインドを解除する必要があります。

$(element).on("dragenter dragleave", false);