HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #taa{width: 300px;height: 300px;background: #DEDEDE;} </style> </head> <body> <!--第一步 设置 拖拽的属性 draggable="true" 绑定drag事件--> <img src="img/a.jpg" alt="mytu" draggable="true" id="mytu"/> <!--第二步 设置 放置位置 触发事件 dragover--> <!--第三步 设置 放置之后 触发事件 dragover--> <div id="taa"></div> </body> <script src="JS/tuo.js"></script> </html>
jQuery代码
(function(){ /*------------------节点-------------- */ var mytu=document.getElementById("mytu"); var taa=document.getElementById("taa"); /*------------------事件锁定-------------- */ //ondragstart - 用户开始拖动元素时触发 //ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 //ondrop - 在一个拖动过程中，释放鼠标键时触发此事件 mytu.ondragstart=drag;//拖动什么 taa.ondragover=dragover;//放到何处 taa.ondrop=drop;//进行放置 /*------------------函数------------- */ function drag(ev){ //通过ondragstart事件存储 当前节点ID到ev.dataTransfer里面 //数据类型是 "Text"，值是可拖动元素的 id ("drag1")。 ev.dataTransfer.setData("Text",ev.target.id); console.log("hollk"); } function dragover(){ event.preventDefault(); //添加一个默认事件的取消 使得drop生效 console.log("koml"); } function drop(ev){ var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); console.log("huam"); } })();
- 释放目标时触发的事件:
- ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
- ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
- ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
- ondrop - 在一个拖动过程中，释放鼠标键时触发此事件