拖拽事件分两大块，一块是对拖拽的目标上的处理(即拖动目标)；一块是对拖拽到的目标上的处理(即释放目标)。
在拖动目标上触发事件 (源元素):
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发
释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
实现代码如下：box1和lists可以相互拖拽
<!doctype html> <html> <head> <meta charset="utf-8"> <title>title</title> <style> #box1{width: 200px;height: 250px;border:2px solid red;} #lists{ width:200px; height:250px; list-style: none;padding: 0;margin: 10px 0px; border:2px solid blue;} li{width: 150px;height: 30px; margin: 5px 0; padding:0;background: #ccc; line-height:30px;text-align: center ;} </style> <script> window.onload=function () { var box1=document.getelementbyid("box1"); var lists=document.getelementbyid("lists"); var lis=document.getelementsbytagname("li"); for(var i=0;i<lis.length;i++){ lis[i].draggable=true; lis[i].flag=false; //1、拖拽开始 lis[i].ondragstart=function () { this.flag=true; } //2、拖拽移动 two.ondrag=function () { } //3、拖拽结束 lis[i].ondragend=function () { this.flag=false; } } //投放区事件 //1、进入投放区 box1.ondragenter=function (e) { e.preventdefault(); } //2、在投放区内移动 box1.ondragover=function (e) { e.preventdefault(); } //3、离开投放区 box1.ondragleave=function (e) { e.preventdefault(); } //4、完成投放 此时可以在投放区内做处理 box1.ondrop=function (e) { e.preventdefault(); for(var i=0;i<lis.length;i++){ if(lis[i].flag){ box1.appendchild(lis[i]); } } } lists.ondragenter=function (e) { e.preventdefault(); } lists.ondragover=function (e) { e.preventdefault(); } lists.ondragleave=function (e) { e.preventdefault(); } lists.ondrop=function (e) { e.preventdefault(); for(var i=0;i<lis.length;i++){ if(lis[i].flag){ lists.appendchild(lis[i]); } } } } </script> </head> <body> <p id="box1"></p> <ul id="lists"> <li>数据1</li> <li>数据2</li> <li>数据3</li> <li>数据4</li> <li>数据5</li> <li>数据6</li> </ul> </body> </html>
其中：getelementsbytagname() 方法可返回带有指定标签名的对象的集合。
e.preventdefault();是阻止系统默认的拖拽事件。
appendchild()是添加控件到指定控件中。
e.preventdefault();
以上就是html drag拖拽事件的所有内容了，希望给大家带来帮助。
相关推荐：
用js和html做一个简易画板代码
js操作dom对象的流程
html js 有关问题
以上就是html drag拖拽事件的详细内容。