元素在拖放过程中触发的事件
HTML5中,只要将元素的 draggable 属性设置为 true 就可以实现拖放功能,在拖放过程中,触发了多个事件,如下:
- dragstart:事件主体是被拖放元素,在开始拖放被拖放元素时触发。
- drag:事件主体是被拖放元素,在正在拖放被拖放元素时触发。
- dragenter:事件主体是目标元素,在被拖放元素进入某元素时触发。
- dragover:事件主体是目标元素,在被拖放在某元素内移动时触发。
- dragleave:事件主体是目标元素,在被拖放元素移出目标元素是触发。
- drop:事件主体是目标元素,在目标元素完全接受被拖放元素时触发。
- dragend:事件主体是被拖放元素,在整个拖放操作结束时触发。
以上我们看到拖动总共有7个事件,其中事件主体是拖放元素的是,dragstart(开始拖动) 、drag(正在拖放)
、dragend(拖放结束),其他4个事件主体都是目标元素,进入、移动、离开、完全进入四个状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5实现拖拽操作</title>
<style>
.album {
border: 3px dashed #ccc;
float: left;
margin: 10px;
min-height: 100px;
padding: 10px;
width: 220px;
}
img {
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<div id="info">
<h2>可将照片直接拖到垃圾箱中</h2>
</div>
<div id="album" class="album">
<h2>相册</h2>
<img draggable="true" id="img1" src="./1.jpg" />
<img draggable="true" id="img2" src="./2.jpg" />
<img draggable="true" id="img3" src="./1.jpg" />
</div>
<div id="trash" class="album">
<h2>回收站</h2>
</div>
<script>
// function init() {
var info = document.getElementById("info");
var src = document.getElementById("album");
//开始拖放操作
src.ondragstart = function (e) {
console.log('ssssssssssdddd', e, e.target.id);
var dragImgId = e.target.id;
//获得被拖动元素
var dragImg = document.getElementById(dragImgId);
//拖放操作结束
dragImg.ondragend = function (e) {
info.innerHTML = "可将照片直接拖到回收站";
};
e.dataTransfer.setData("text", dragImgId);
};
//拖放过程中
src.ondrag = function (e) {
info.innerHTML = "照片正在被拖动";
}
//获得拖放的目标元素
var target = document.getElementById("trash");
//取消默认事件
target.ondragenter = function (e) {
e.preventDefault();
}
target.ondragover = function (e) {
e.preventDefault();
}
target.ondrop = function (e) {
var draggedID = e.dataTransfer.getData("text");
//获取相册中的DOM对象
var oldElem = document.getElementById(draggedID);
//从相册DIV中删除该照片的节点
oldElem.parentNode.removeChild(oldElem);
//将被拖动的照片DOM节点添加到垃圾桶DIV中;
target.appendChild(oldElem);
info.innerHTML = "可将照片直接拖到回收站";
e.preventDefault();
}
// }
</script>
</body>
</html>