简介本篇文章给大家带来的内容是关于html5的drag和drop的用法示例（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。5分钟弄清楚html5的draganddrop，及其他监听事件和执行的次序。示例如下：5分钟draganddrop简明示例#draggable{width:200px;height:20px;text-align:center;background:whit
本篇文章给大家带来的内容是关于html5的drag和drop的用法示例（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
5分钟弄清楚html5的drag and drop，及其他监听事件和执行的次序。
示例如下：
<!DOCTYPEhtml><html><head>< charset="UTF-8">< name="viewport"content="width=device-width,initial-scale=1.0">< http-equiv="X-UA-Compatible"content="ie=edge">< >5分钟draganddrop简明示例</ ><style>#draggable{width:200px;height:20px;text-align:center;background:white;}.dropzone{width:200px;height:20px;background:blueviolet;margin-bottom:10px;padding:10px;}</style>< >vardragged;document.addEventListener("dragstart",function(event){console.log('==========dragstart开始被拖拽==========一次拖动只执行一次');//保存拖动元素的引用(ref.)dragged=event.target;//使其半透明event.target.style.opacity=.5;},false);/*拖动目标元素时触发drag事件*/document.addEventListener("drag",function(event){//console.log('==========drag==========拖拽时会一直监听，直到放下元素');},false);/*放置目标元素时触发事件*/document.addEventListener("dragover",function(event){//console.log('==========dragover==========拖拽时会一直监听，直到放下元素');//阻止默认动作以启用dropevent.preventDefault();},false);document.addEventListener("dragenter",function(event){console.log('==========dragenter拖曳元素进入目标元素==========对应着dragleave');//当可拖动的元素进入可放置的目标时高亮目标节点if(event.target.className=="dropzone"){event.target.style.background="purple";}},false);document.addEventListener("dragleave",function(event){console.log('==========dragleave拖曳元素离开目标元素==========对应着dragenter');//当拖动元素离开可放置目标节点，重置其背景if(event.target.className=="dropzone"){event.target.style.background="";}},false);document.addEventListener("drop",function(event){console.log('==========drop放下元素==========一次拖动只执行一次，在dragenter前触发');//阻止默认动作（如打开一些元素的链接）event.preventDefault();//将拖动的元素到所选择的放置目标节点中if(event.target.className=="dropzone"){event.target.style.background="";dragged.parentNode.removeChild(dragged);event.target.appendChild(dragged);}},false);document.addEventListener("dragend",function(event){console.log('==========dragend结束拖拽==========一次拖动只执行一次');//重置透明度event.target.style.opacity="";},false);</ ></head><body><div><divid="draggable"draggable="true" start="event.dataTransfer.setData('text/plain',null)">这是可以拖拽的DIV</div></div><div></div><div></div><div></div></body></html>
下载链接：网站源码/小程序源码/网站模板下载
