H5的拖拽事件
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
border: 2px solid gray;
display: inline-block;
}
.box img{
width: 100%;
height: 100%;
}
.userPic{
width: 200px;
height: 200px;
border: 2px solid gray;
}
.userPic img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class = "box"></div>
<img src="https://www.baidu.com/img/bd_logo1.png" draggable="true" id="dragObj">
<div class="userPic">上傳頭像</div>
</body>
<script type="text/javascript">
//h5新增了drag相關(guān)事件
//拖拽頁(yè)面上的圖片
var img = document.getElementsByTagName("img")[0],
box = document.getElementsByClassName("box")[0];
//被拖拽元素上綁定dragstart事件
img.ondragstart = function(e){
//獲取元素標(biāo)識(shí)并放入事件對(duì)象
e.dataTransfer.setData("id", "dragObj");
};
//為容器對(duì)象綁定dragover和drop事件
box.ondragover = function(e){
//阻止默認(rèn)事件
e.preventDefault();
}
box.ondrop = function(e){
//從事事件對(duì)象中獲取元素標(biāo)識(shí)id
var objId = e.dataTransfer.getData("id");
//將被拖拽元素移動(dòng)到容器內(nèi)部。
this.appendChild(document.getElementById(objId));
}
//拖拽打開外部文件
//接收容器
var userPic = document.getElementsByClassName("userPic")[0];
//給接收容器加dragover和drop事件
userPic.ondragover = function(e){
e.preventDefault();
};
userPic.ondrop = function(e){
e.preventDefault();
//獲取被拖拽的文件
var file = e.dataTransfer.files[0];
//用FileReader實(shí)例來讀取文件
var reader = new FileReader();
reader.readAsDataURL(file);
//讀取成功吃觸發(fā)reader 的load事件
reader.onload = function(){
//創(chuàng)建圖片標(biāo)簽
var img = document.createElement("img");
//result屬性值為接收結(jié)果
img.src = reader.result;
//取消容器中上傳頭像的文字
userPic.innerHTML = "";
//把img添加到userPic容器中
userPic.appendChild(img);
};
//還原border
this.style.border = "2px solid gray";
};
//當(dāng)被拖拽文件進(jìn)去容器中觸發(fā)dragenter事件
userPic.ondragenter = function(e){
e.preventDefault();
this.style.border = "5px red dotted";
};
//當(dāng)被拖拽文件離開容器中觸發(fā)dragleave事件
userPic.ondragleave = function(e){
e.preventDefault();
this.style.border = "2px solid gray";
};
</script>
</html>
