js 实现拖动dom元素并交换位置 谁践踏了优雅 2021-12-12 04:43 873阅读 0赞 效果图如下: ![20190710111130591.gif][] <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body { display: flex; padding: 100px; } div { width: 100px; height: 100px; text-align: center; line-height: 100px; color: white; margin-right: 10px; } </style> </head> <body> <!-- 设置draggable为true使其变为可拖动状态 --> <div style="background: purple" draggable="true">DIV1</div> <div style="background: orange" draggable="true">DIV2</div> <div style="background: aqua" draggable="true">DIV3</div> </body> <script type="text/javascript"> // 得到你需要进行拖动变换的所有dom元素 let div = document.getElementsByTagName("div") let container = null for(let i = 0; i < div.length; i++) { div[i].ondragstart = function() { // 当拖动其中一个元素时,this的指向便是你所拖动的元素,将它存在container container = this } // 默认的当你dragover的时候会阻止你做drop的操作,所以需要取消这个默认 div[i].ondragover = function() { event.preventDefault() } // 当拖动结束时,给拖动div所在位置下面的div做drop事件,注意drop时this的指向发生改变 div[i].ondrop = function() { if(container != null && container != this) { console.log("now this:",this) console.log("now container:",container) let temp = document.createElement("div") document.body.replaceChild(temp,this) document.body.replaceChild(this,container) document.body.replaceChild(container,temp) } } } </script> </html> [20190710111130591.gif]: /images/20211211/da5999b76b314ce7b9b10715921a8168.png
还没有评论,来说两句吧...