JavaScript/イベント/drop

JavaScript/イベント/drop

ドラッグドロップのドロップのイベント。DnD とか呼ばれたりする。

ファイルをドロップ

var hoge = document.getElementById("hoge"); 
hoge.addEventListener("drop", function(e){
    e.preventDefault();   //通常のドロップ挙動をキャンセル
    var fileList = e.dataTransfer.files;
    for(let f of fileList){
    }
});

files からその要素に(Finder等のファイラから)ドロップされたファイルの一覧が得られる。 ここから容易にファイル操作が可能になる。

複数ファイルを同時にドロップした場合の順番に関してはよくわからない。 ファイラに並んでいた通りにはならない場合がある。

drop には対になる dragover イベントがあって、このイベントをフックして

hoge.addEventListener("dragover", function(e){
    e.preventDefault();
});

このようにキャンセルしておかないと、drop イベントが発生せず、通常のブラウザの挙動(ファイルならばそれを開く)になってしまう。 なので、drop のイベントを制御するときは dragover の制御とセットである。

javascript/ope/dom_ope/event/drop.txt · 最終更新: 2020-09-22 11:03 by ore