在H5之前，如果要实现一个元素的拖放效果，需要结合onmousedown 、 onmousemove 、 onmouseup 事件，以及获取鼠标位置才能实现元素的拖动的效果。所以很麻烦。而在HTML5中，只要将某个元素的 draggable 属性设置为 true ，该元素就可以实现拖放的效果。并且拖放过程中也能触发很多事件。 默认情况下，浏览器都是支持drag & drop API的，图像、链接和文本是可以拖动的，也就是说，不用额外编写代码，用户就可以拖动它们，拖动带链接的图片或链接到地址栏，就会在新页面打开i图片和链接。图像和链接要置顶链接，而文本在被选中的情况下也能拖动。
HTML5中，只要将元素的 draggable 属性设置为 true 就可以实现拖放功能，在拖放过程中，触发了多个事件，如下：
dragstart:事件主体是被拖放元素，在开始拖放被拖放元素时触发。drag：事件主体是被拖放元素，在正在拖放被拖放元素时触发。dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。以上我们看到拖动总共有7个事件，其中事件主体是拖放元素的是，dragstart（开始拖动） 、drag（正在拖放） 、dragend（拖放结束），其他4个事件主体都是目标元素，进入、移动、离开、完全进入四个状态。
注意：为了减少事件，你可以在事件 ondragenter 的时候 绑定方法 ，而 ondragleave 的时候，删除 方法。最好不要绑定在 dragover 上，它就像 mouseover ，在拖动的过程中不断触发，对于浏览器的负担就很大了，浏览器还有可能崩溃
<!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; } </style> </head> <body> <div id="info"> <h2>可将照片直接拖到垃圾箱中</h2> </div> <div id="album" class="album"> <h2>相册</h2> <img draggable="true" id="img1" src="img/1.jpg" /> <img draggable="true" id="img2" src="img/2.jpg" /> <img draggable="true" id="img3" src="img/3.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) { 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>