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相关事件
//拖拽页面上的图片
var img = document.getElementsByTagName("img")[0],
box = document.getElementsByClassName("box")[0];
//被拖拽元素上绑定dragstart事件
img.ondragstart = function(e){
//获取元素标识并放入事件对象
e.dataTransfer.setData("id", "dragObj");
};
//为容器对象绑定dragover和drop事件
box.ondragover = function(e){
//阻止默认事件
e.preventDefault();
}
box.ondrop = function(e){
//从事事件对象中获取元素标识id
var objId = e.dataTransfer.getData("id");
//将被拖拽元素移动到容器内部。
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实例来读取文件
var reader = new FileReader();
reader.readAsDataURL(file);
//读取成功吃触发reader 的load事件
reader.onload = function(){
//创建图片标签
var img = document.createElement("img");
//result属性值为接收结果
img.src = reader.result;
//取消容器中上传头像的文字
userPic.innerHTML = "";
//把img添加到userPic容器中
userPic.appendChild(img);
};
//还原border
this.style.border = "2px solid gray";
};
//当被拖拽文件进去容器中触发dragenter事件
userPic.ondragenter = function(e){
e.preventDefault();
this.style.border = "5px red dotted";
};
//当被拖拽文件离开容器中触发dragleave事件
userPic.ondragleave = function(e){
e.preventDefault();
this.style.border = "2px solid gray";
};
</script>
</html>
