HTML5拖放实现逻辑及代码讲解
程序员文章站
2022-07-01 23:04:42
1.拖放实现逻辑
开始拖动 ===> 拖动中 ===> 拖动结束(放手)
ondragstart ===> ondragover ===> ondrop
ondragstar...
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>
上一篇: 闷逗又坑爹的冷幽默