1.创建拖拽对象 给需要拖拽的元素设置draggable属性，它有三个值： true：元素可以被拖拽；false：元素不能被拖拽；auto： 浏览器自己判断元素是否能被拖拽。
2.处理拖拽事件当我们拖拽对象的时候会触发拖拽事件包括： A.dragstart：当元素拖拽开始触发； B.drag：在元素拖拽过程中触发； C.dragend：元素拖拽结束时触发
3.创建投放区
①当拖拽对象进入投放区的时候会触发相关的事件
A.dragenter：当拖拽对象进入投放区时触发； B.dragover：拖拽对象在投放区内移动时触发； C.dragleave：拖拽对象没有投放到投放区，离开投放区的 时候触发； D.drop：拖拽对象投放在投放区时触发。
②注意：dragenter、dragover可能会受到默认事件的影 响，所以我们在这两个事件当中使用 e.PReventDefault();来阻止事件默认事件
4.使用dataTransfer传递数据 当我们需要拖拽对象向投放区传递数据的时候用到 dataTransfer有下面的属性和方法：
1.types：返回数据的格式； 2.getData(<format>)：返回指定格式数据； 3.setData(<format>, <data>)：设置指定格式数据； 4.clearData(<format>)：移除指定格式数据； 5.files：返回已经投放的文件的信息数组。 1.type：文件类型 2.size:文件大小 3.name:文件名
编程实例：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 200px; border: 1px solid red; margin:30px; float: left; } img{ width: 200px; height: 200px; } </style></head><body> <div id="div1" ondrop="drop(event)" ondragover="allowDrag(event)"> <img src="CSS/imgs/s3.jpg" id="img1" draggable="true" ondragstart="drag(event)" /> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrag(event)">
</div></body><script type="text/javascript"> function drag(e){ e.dataTransfer.setData("Text", e.target.id); } function drop(e){ var data= e.dataTransfer.getData("Text") e.target.appendChild(document.getElementById(data)); e.preventDefault(); } function allowDrag(e){ e.preventDefault(); }</script></html>
新闻热点
疑难解答
