大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......
github：https://github.com/Daotin/Web
微信公众号：Web前端之巅
博客园：
CSDN：https://blog.csdn.net/lvonve/
在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
一、拖拽接口元素拖拽事件：
ondrag ：应用于拖拽元素，整个拖拽过程都会持续调用；
ondragstart：应用于拖拽元素，当拖拽开始时调用；
ondragleave：应用于拖拽元素，拖拽过程中，当鼠标离开拖拽元素范围时调用；
ondragend ：应用于拖拽元素，当拖拽结束时调用。
目标拖拽事件：
ondragenter：应用于目标元素，当拖拽元素进入时调用；
ondragover：应用于目标元素，当停留在目标元素上时调用；
ondrop：应用于目标元素，当在目标元素上松开鼠标时调用；
ondragleave：应用于目标元素，当鼠标离开目标元素时调用。
示例：将一个div中的p标签拖拽到另一个p标签中
<body> <div> <!--在h5中，如果想拖拽元素，就必须为元素添加draggable="true". 图片和超链接默认就可以拖拽--> <p draggable="true">试着把我拖过去</p> </div> <div></div> <script> /*学习拖拽，主要就是学习拖拽事件*/ var p=document.querySelector("#pe"); var div2=document.querySelector("#div2"); // 应用于被拖拽元素 p.ondragstart=function(){ console.log("ondragstart"); } p.ondragend=function(){ console.log("ondragend"); } p.ondragleave=function(){ console.log("被拖拽元素：ondragleave"); } p.ondrag=function(){ console.log("ondrag"); } // 应用于目标元素的事件 div2.ondragenter=function(){ console.log("ondragenter"); } div2.ondragover=function(e){ console.log("ondragover"); /*如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为*/ e.preventDefault(); } /*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/ div2.ondrop=function(){ console.log("ondrop"); /*添加被拖拽的元素到当前目标元素*/ div2.appendChild(p); } div2.ondragleave=function(){ console.log("目标元素：ondragleave"); } </script> </body>1、被拖拽的元素必须添加 draggable="true" 属性。
2、浏览器默认会阻止目标元素的 ondrop 事件：我们必须在目标元素的 ondragover 中阻止浏览器的默认行为（使用事件参数对象的 preventDefault()方法），才能将拖拽的元素放到目标元素中。
遗留问题：如果有多个 div，那么每个 div 都必须写 ondragover 和 ondrop 事件触发的处理函数，也就是只能拖拽指定的元素到指定的元素中，这样代码的可用性就很低了。
分析问题：既然有多个被拖拽元素和多个目标元素存在，这些元素都存在于 document 中的，那么可不可以给 document 添加这些事件呢？
答案是可以的。
<body> <div> <p draggable="true">试着把我拖过去</p> <p draggable="true">试着也把我拖过去</p> </div> <div></div> <div></div> <script> var obj=null;//当前被拖拽的地元素 //应用于被拖拽元素的事件 document.ondragstart=function(e){ obj= e.target; } //应用于目标元素的事件 document.ondragover=function(e){ /*如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为*/ e.preventDefault(); } /*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/ document.ondrop=function(e){ /*添加元素*/ e.target.appendChild(obj); } </script> </body>在事件参数对象中有一个 target 属性，其值为被拖拽的元素对象。
问题解决了，但是，又是但是......，但是一般少使用全局变量，全局变量谁都可以修改，容易误操作。
在事件参数对象中有一个 dataTransfer 属性，通过 dataTransfer 来实现数据的存储与获取。
dataTransfer 有两个方法：
setData(format,data);用于存储数据；
getData(format,data); 用于取出数据；（取出数据必须在目标元素的 ondrop 事件中，其他事件中无法取到数据）
format:数据的类型：text/html ，text/uri-list
Data:数据:一般来说是字符串值