一：基础知识
传统的拖放式根据鼠标按下松开事件完成的HTML5对于拖放只需要在元素上面设置draggable="true"属性,移动端不支持<div draggable="true"></div>拖放事件：dragstart 当一个元素开始被拖拽的时候触发drag 这个事件在拖拽源触发dragend 拖拽源在拖拽操作结束将得到dragend事件对象，不管操作成功与否dragenter 当拖拽中的鼠标第一次进入一个元素时触发dragover 当拖拽中的鼠标移动经过一个元素时触发dragleave 当拖拽中的鼠标离开元素时触发drop 这个事件在拖拽操作结束释放时于释放元素上触发注：在拖拽的时候只会触发拖拽的相关事件，鼠标事件，例如mousemove是不会触发的。
以下是基础代码演示：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#mydiv{width: 150px;height: 150px;background-color: rgba(100, 50, 50, 0.3);}#container{width: 400px;height: 400px;background-color: aqua;opacity: 0.3;margin: 50px auto;}</style></head><body><div id="mydiv" draggable="true"></div><div id="container"></div><script>var mydiv = document.getElementById("mydiv");// 拖事件 开始mydiv.ondragstart = function(){console.log('开始拖');}// 拖事件 正在 一直触发mydiv.ondrag = function(){console.log('正在拖');}// 拖事件 结束mydiv.ondragend = function(){console.log('结束拖');}// 放元素var container = document.getElementById('container');// 放事件 进入了container.ondragenter = function(){console.log('放入了');}// 放事件 放在上面 持续触发container.ondragover = function(e){console.log('放上了');// 阻止默认事件，以便触发ondrop事件e.preventDefault();}// 放事件 离开了container.ondragleave = function(){console.log('离开了');}// 放事件 放开了container.ondrop = function(){console.log('放开了');}</script></body></html>
不入框，则只触发拖事件
注释掉拖事件的代码后，拖动灰框进入蓝框：
二：拖动分类案例：
一般在一个元素开始被拖拽的时候，触发dragstart时候设置与这次拖拽相关的信息，例如拖动的数据和图像所有的拖拽事件都有一个属性————dataTransfer，它包含着拖拽数据dataTransfer 的api文档：/en-US/docs/Web/API/DataTransferdataTransfer基础语法：dataTransfer的常用方法：data：保存在拖拽元素中的数据setData(format,data):设置拖拽元素的信息setDragImage(element, x, y): 使用存在的图像元素作为拖动图像format：和setData里的format遥相呼应，才能取到相应的值，系统默认格式为： text/plain、text/html、text/xml、text/url-list（也可以自定义format，把format-data当key-value键值对使用）getData(format)：获取拖拽元素的信息addData(element): 调用此函数需要提供一个页面元素作为参考，同时使用此参数作为拖放反馈图像clearData()：清除拖拽信息dataTransfer的常用属性：effectAllowed：设置拖拽时应带有的样式类型dropEffect：设置拖拽元素被放下时的样式files：内含一系列文件信息，常用于将文件从桌面拖向浏览器items: 返回所有项与相关格式的所有文件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#mydivBox{display: flex;}.mydiv{width: 100px;height: 100px;background-color: rgb(129, 233, 88);}#containerBox{display: flex;}#container{width: 500px;height: 500px;border: 5px solid burlywood;}#container2{width: 500px;height: 500px;border: 5px solid burlywood;}</style></head><body><div id="mydivBox"><div class="mydiv" id="div1" draggable="true">1</div><div class="mydiv" id="div2" draggable="true">2</div><div class="mydiv" id="div3" draggable="true">3</div><div class="mydiv" id="div4" draggable="true">4</div><div class="mydiv" id="div5" draggable="true">5</div><div class="mydiv" id="div6" draggable="true">6</div></div><div id="containerBox"><div id="container"></div><div id="container2"></div></div><a href="../../0.img/1.jpg"></a><script>var mydivs = document.getElementsByClassName("mydiv");var container = document.getElementById('container');var container2 = document.getElementById('container2');// 给方块绑定for(var i = 0, len = mydivs.length; i < len; i++){mydivs[i].ondragstart = function(e){// console.log(e.dataTransfer);e.dataTransfer.setData('id', this.id);// 设置显示图片var img = new Image(); // 图像节点img.src = '../../0.img/1.png'e.dataTransfer.setDragImage(img, 30, 30);}}// 取消默认事件container.ondragover = function(){return false;}container2.ondragover = function(){return false;}// 放事件container.ondrop = function(e){// 获取之前存储的idvar id = e.dataTransfer.getData('id');// 根据id获取节点var node = document.getElementById(id);this.appendChild(node);}container2.ondrop = function(e){// 获取之前存储的idvar id = e.dataTransfer.getData('id');// 根据id获取节点var node = document.getElementById(id);this.appendChild(node);}</script></body></html>
三：给歌单拖动排序
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul{list-style: none;}.item{background-color: #ccc;margin-bottom: 5px;padding: 10px;width: 200px;}</style></head><body><ul class="list-ul"><li class="item" draggable="true">美丽之物</li><li class="item" draggable="true">Coming Home</li><li class="item" draggable="true">secret base</li><li class="item" draggable="true">芒种</li><li class="item" draggable="true">Bloom of Youth</li><li class="item" draggable="true">骑在银龙的背上</li></ul><script>var items = document.getElementsByClassName('item');var listUl = document.getElementsByClassName('list-ul')[0]; for(var i = 0, len = items.length; i < len; i++){// 设置id方便选取items[i].id = 'mydiv' + i;// 拖的时候把id存起来items[i].ondragstart = function(e){e.dataTransfer.setData('id', this.id);}// 放之前取消默认事件items[i].ondragover = function(){return false;}// 放事件items[i].ondrop = function(e){var id = e.dataTransfer.getData('id');var tuo = document.getElementById(id);listUl.insertBefore(tuo, this);this.style.borderTop = '0px solid black';}// 放到上面时添加效果items[i].ondragenter = function(){this.style.borderTop = '5px solid black';}// 离开时去掉边items[i].ondragleave = function(){this.style.borderTop = '0px solid black';}}</script></body></html>
更多相关内容大家可以前往我的个人博客浏览：eyes++的个人空间
