脚本宝典收集整理的这篇文章主要介绍了html5教程-HTML5拖放实现逻辑及代码讲解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
开始拖动 ===> 拖动中 ===> 拖动结束(放手)
ondragstart ===> ondragover ===> ondrop
ondragstart 绑定在需要被拖动的dom上
ondragover和ondrop绑定在接受被拖动dom进入的dom上
单个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> 开始拖动 ===> 拖动中 ===> 拖动结束(放手)
ondragstart ===> ondragover ===> ondrop
ondragstart 绑定在需要被拖动的dom上
ondragover和ondrop绑定在接受被拖动dom进入的dom上
单个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> 觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的html5教程-HTML5拖放实现逻辑及代码讲解全部内容，希望文章能够帮你解决html5教程-HTML5拖放实现逻辑及代码讲解所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。