画像投稿機能備忘録２

ドラッグ&ドロップについて

var dropZone = document.getElementById("drop_zone");

dropZone.addEventListener("dragover", function(e){
e.stopPropagation();
e.preventDefault();
}, false);
dropZone.addEventListener("drop", function(e){
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files;
for ( var i = 0; i < files.length; i++){
inputs.push(files[i])
}
divideFiles(files)
}, false)

var dropZone　でドラッグ&ドロップの場所を指定

dropZone.addEventListener("dragover", function(e){

のdragoverはドラッグ&ドロップ中、マウスカーソルがドラッグ&ドロップ指定した

要素の範囲内で移動するときに発火し、

dropZone.addEventListener("drop", function(e){

のdropはファイルをドロップ領域にドロップした時に発火する。

e.stopPropagation();　と　e.preventDefault();

上記は　e.preventDefault();　でデフォルトで設定されたイベントを抑制し、

e.stopPropagation();　でイベントの伝播を止めることができる。

preventDefaultが無いと画像をブラウザで開く事になり、ドラッグ&ドロップができなくなる。

e.dataTransfer.files;　でdropされたファイルを受け取り、データを保持する。