HTML 5ドラッグ＆ドロップDragとdropの使い方とイベント紹介

要素をドラッグ＆ドロップ可能に設定
まず、要素をドラッグ可能にするにはdraggableプロパティをtrueに設定します.

<img draggable="true">

ドラッグイベント
名前
さぎょう
dragstart
ドラッグ時にトリガー
dragend
ドラッグ完了時にトリガー
dragenter
ターゲット要素にdragenterイベントをバインドし、要素をドラッグしてターゲット要素に入るとトリガーされます.
dragover
ターゲット要素にdragoverイベントをバインドし、ターゲット要素をドラッグして移動するとトリガーされます.
drop
ターゲット要素にdropイベントをバインドし、現在のターゲット要素のdragoverのデフォルトイベントをキャンセルし、ターゲット要素をドラッグ&ドロップしながらイベントをトリガーする. : box . box.addEventListener('dragover', function(e){console.log('dragover'); e.preventDefault();}); box.addEventListener('drop', function(e){console.log('drop');}); dropとdragendが同時にバインドされている場合dropイベントが先にトリガーされます
現在のドラッグ要素の情報を取得するには、DragEventイベントオブジェクトを使用することができます.このオブジェクトには、2つの重要なプロパティがあります.

e.dataTransfer.setData("data",e.target.id);
//target               （        ），        、     。
e.dataTransfer.getData("data")
//                         .

ドラッグ＆ドロップでファイルをアップロードする

ele.addEventListener('dragover', function (e) {
    e.preventDefault();
}, false);
ele.addEventListener('drop', function (e) {
    //   preventDefault()               （drop                ）
    e.preventDefault();
    console.log(e)
    var dt = e.dataTransfer;
    var files = dt.files;
    console.log(files);
}, false)