本篇文章给大家带来的内容是关于html5的drag和drop的用法示例（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
5分钟弄清楚html5的drag and drop，及其他监听事件和执行的次序。
示例如下：
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>5分钟draganddrop简明示例</title><style>#draggable{width:200px;height:20px;text-align:center;background:white;}.dropzone{width:200px;height:20px;background:blueviolet;margin-bottom:10px;padding:10px;}</style><script>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);</script></head><body><div><divid="draggable"draggable="true"ondragstart="event.dataTransfer.setData('text/plain',null)">这是可以拖拽的DIV</div></div><div></div><div></div><div></div></body></html>
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/38768.html；