食品网站建设案例网站建设 兼职 外包
元素在拖放过程中触发的事件
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>