拖放
拖放是一种常见的特性,即抓取对象以后,从当前位置拖到另一个位置的过程。
dragenter
开始拖动
dragover
拖动中
dragleave
拖动放开
drop
拖动完成
html 元素
<div id="target_box">把图片拖到这里试试</div>
<div id="show-drop" title="拖动的图片可以在这里显示出来"></div>
// js 部分
复制代码
function addEventListener(dom,event,callback){
if(typeof dom == "string"){
document.querySelector(dom).addEventListener(event,callback);
}else{
dom.addEventListener(event,callback);
}
}
//开始拖动
addEventListener(document,"dragenter",function(e){
e.preventDefault();
document.querySelector("#target_box").setAttribute("class","droping");
});
//拖动中
addEventListener(document,"dragover",function(e){
e.preventDefault();
});
//拖放完成
addEventListener(document,"drop",function(e){
e.preventDefault();
});
//拖放离开
addEventListener(document,"dragleave",function(e){
e.preventDefault();
document.querySelector("#target_box").setAttribute("class","");
});
//监听是否拖放当元素上后离开的
addEventListener("#target_box",'drop',function(e){
e.preventDefault();//移除原有浏览器监听效果
var dataTransfer = e.dataTransfer;//获取文件对象
var files = dataTransfer.files[0];
//获取文件后缀
var match = files.name ? files.name.match(/\.([a-zA-Z]+)$/) || [] : false;
var suffix = match ? match[1] : "";
//如果后缀不是图片
if(!suffix || ["jpg","jpeg","png","gif"].indexOf(suffix.toLocaleLowerCase()) < 0){
return alert("你拖动的不是图片");
}
//读取文件的 base64 值
var filereader = new FileReader();
addEventListener(filereader,'load',function(ee){
//获取 base64 编码
var base64 = ee.target.result;
var img = document.createElement("img");
img.src = base64;
//将图片添加到页面中
document.querySelector("#show-drop").appendChild(img);
});
filereader.readAsDataURL(files);
});