1.拖放实现逻辑
开始 拖动 === > 拖动中 == => 拖动结束(放手)
on Drag start ===> ondragover ===> ondrop
ondragstart 绑定在需要被拖动的dom上
ondragover和ondrop绑定在接受被拖动dom进入的dom上
2.实例
单个dom的拖动
<!DOCTY PE ht ML > <html> <head> <t IT le>drag</title> <style type="text/css"> .wrapper{ width: 400px; h ei ght: 200px; padding: 10px; border: 1px solid red ; } .wrapper img { width: 100%; height: 100%; } </style> </head> <body> <p class="wrapper" ondragover="dragOver(event)" ondrop="dragDrop(event)"> <img id="dragImg" src="./lo gin . jpg " draggable="true" ondragstart="dragStart(event)"> </p> <p class="wrapper" ondragover="dragOver(event)" ondrop="dragDrop(event)"> </p> </body> <script type="text/javascript"> function dragStart (event) { event.data transfer .setData(& # 39;Text', event.t arg et.id); } function dragOver(event) { event.p rev entDefault(); } function dragDrop(event) { event. PR eventDefault(); VAR data = event.dataTransfer.getData('Text'); event.target.appendChild(document.querySelector('#'+data)); } </script> </html> 多个dom的拖动
<!DOCTYPE html> <html> <head> < ;m eta charset="utf-8"> <title>dragList</title> <style type="text/css"> #left{ float: left; border: 1px solid red; } #right{ float: right; border: 1px solid blue; } #left,#right{ width: 300px; min-height: 400px; } .images img{ max-width: 260px; max-height: 300px; } </style> </head> <body> <ul id="left"> <li id="img1" class="images" draggable="true"><img src=" LOG in.jpg"></li> <li id="img2" class="images" draggable="true"><img src="loginu.png"></li> <li id="img3" class="images" draggable="true"><img src="反馈.png"></li> </ul> <ul id="right"> <li id="img4" class="images" draggable="true"><img src="日落.png"></li> <li id="img5" class="images" draggable="true"><img src="等待.png"></li> <li id="img6" class="images" draggable="true"><img src="规则.png"></li> </ul> </body> <script type="text/javascript"> window.onload = function () { function myPreventDefault(event) { if(event.preventDefault) { event.preventDefault(); }else { event.returnValue = false; } } function myDragOver (event) { myPreventDefault(event); } function myDragDrop (event) { myPreventDefault(event); var data = event.dataTransfer.getData('Text'); console.log(data); event.target.appendChild(document.getElementById(data)); } function myDragStart(event) { event.dataTransfer.setData('Text', event.target.id); } var nodelist = document.querySelectorAll('.images'); for (var i = 0; i < nodeList.length; i++ ) { nodeList[i].addEventListener('dragstart',myDragStart); } document.getElementById('right').addEventListener('dragover', myDragOver); document.getElementById('right').addEventListener('drop', myDragDrop); document.getElementById('left').addEventListener('dragover', myDragOver); document.getElementById('left').addEventListener('drop', myDragDrop); } </script> </html> 1.拖放实现逻辑
开始拖动 ===> 拖动中 ===> 拖动结束(放手)
ondragstart ===> ondragover ===> ondrop
ondragstart 绑定在需要被拖动的dom上
ondragover和ondrop绑定在接受被拖动dom进入的dom上
2.实例
单个dom的拖动
<!DOCTYPE html> <html> <head> <title>drag</title> <style type="text/css"> .wrapper{ width: 400px; height: 200px; padding: 10px; border: 1px solid red; } .wrapper img{ width: 100%; height: 100%; } </style> </head> <body> <p class="wrapper" ondragover="dragOver(event)" ondrop="dragDrop(event)"> <img id="dragImg" src="./login.jpg" draggable="true" ondragstart="dragStart(event)"> </p> <p class="wrapper" ondragover="dragOver(event)" ondrop="dragDrop(event)"> </p> </body> <script type="text/javascript"> function dragStart (event) { event.dataTransfer.setData('Text', event.target.id); } function dragOver(event) { event.preventDefault(); } function dragDrop(event) { event.preventDefault(); var data = event.dataTransfer.getData('Text'); event.target.appendChild(document.querySelector('#'+data)); } </script> </html> 多个dom的拖动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>dragList</title> <style type="text/css"> #left{ float: left; border: 1px solid red; } #right{ float: right; border: 1px solid blue; } #left,#right{ width: 300px; min-height: 400px; } .images img{ max-width: 260px; max-height: 300px; } </style> </head> <body> <ul id="left"> <li id="img1" class="images" draggable="true"><img src="login.jpg"></li> <li id="img2" class="images" draggable="true"><img src="loginu.png"></li> <li id="img3" class="images" draggable="true"><img src="反馈.png"></li> </ul> <ul id="right"> <li id="img4" class="images" draggable="true"><img src="日落.png"></li> <li id="img5" class="images" draggable="true"><img src="等待.png"></li> <li id="img6" class="images" draggable="true"><img src="规则.png"></li> </ul> </body> <script type="text/javascript"> window.onload = function () { function myPreventDefault(event) { if(event.preventDefault) { event.preventDefault(); }else { event.returnValue = false; } } function myDragOver (event) { myPreventDefault(event); } function myDragDrop (event) { myPreventDefault(event); var data = event.dataTransfer.getData('Text'); console.log(data); event.target.appendChild(document.getElementById(data)); } function myDragStart(event) { event.dataTransfer.setData('Text', event.target.id); } var nodeList = document.querySelectorAll('.images'); for (var i = 0; i < nodeList.length; i++) { nodeList[i].addEventListener('dragstart',myDragStart); } document.getElementById('right').addEventListener('dragover', myDragOver); document.getElementById('right').addEventListener('drop', myDragDrop); document.getElementById('left').addEventListener('dragover', myDragOver); document.getElementById('left').addEventListener('drop', myDragDrop); } </script> </html> 觉得 可用，就经常来吧！ 欢迎评论哦！&nbs p; html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-HTML5拖放实现逻辑及代码讲解 全部内容，希望文章能够帮你解决 html5教程-HTML5拖放实现逻辑及代码讲解 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-HTML5拖放实现逻辑及代码讲解的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did219280