share facebook facebook twitter menu hatena pocket slack

2011.11.24 THU

HTML5 Drag&Drop

小森隆太

WRITTEN BY 小森隆太

こんにちわ。
職人見習いの小森です。

今回は、HTML5でのドラッグ&ドロップについてです。

○index.html

○main.css

#dropArea {
cursor: pointer;
}

○dd.js

window.addEventListener("load",function(){
var da = document.getElementById("dropArea");
da.addEventListener("drop",function(evt){
var fileList = evt.dataTransfer.files;
for(var i = 0 ; i if(window.FileReader && (fileList[i].type.indexOf("image/") == 0)){
(function(fileObj){
var reader = new FileReader();
reader.onload = function(evt){
var imageObj = new Image();
imageObj.src = reader.result;
image.width = 64;
image.height= 64;
da.appendChild(imageObj);
}
reader.readAsDataURL(fileObj);
})(fileList[i]);
}
}
da.style.backgroundColor="#eee";
},true);

da.addEventListener("dragenter",function(evt){
evt.preventDefault();
da.style.backgroundColor="#ecc";
},true);

da.addEventListener("dragleave",function(evt){
evt.preventDefault();
da.style.backgroundColor="#eee";
},true);

da.addEventListener("dragover",function(evt){
evt.preventDefault();
},true);

window.addEventListener("drop",function(evt){
evt.preventDefault();
},true);

window.addEventListener("dragover",function(evt){
evt.preventDefault();
},true);
},true);

デスクトップからブラウザにドラッグ&ドロップされた複数のファイルから画像のみを表示します。

※この記事は、なかの人(spitz8008)が書いています。

小森隆太

小森隆太