JS_js实现拖动DIV交换位置

怼烎@ 2022-09-11 05:28 192阅读 0赞

![在这里插入图片描述][24d29df1f64bd6d02bfb602b30daa026.gif_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>拖动替换</title>
    </head>
    <style> body { display: flex; padding: 100px; } div { width: 100px; height: 100px; text-align: center; line-height: 100px; color: white; margin-right: 10px; } </style>
    
    <body>
        <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>
    
    </html>
    <script> //获取所有div let div = document.getElementsByTagName("div"); let container = null; //用一个容器来存放拖动的div for (let i = 0; i < div.length; i++) { //当开始拖动的时候把拖动的div用container保存 div[i].ondragstart = function () { container = this; } //默认的当你dragover的时候阻止你做drop的操作，所以需要取消这个默认 div[i].ondragover = function () { event.preventDefault(); } //当拖动结束的时候，给拖动div所在位置下面的div做drop事件 div[i].ondrop = function () { if (container != null && container != this) { let temp = document.createElement("div"); document.body.replaceChild(temp, this); document.body.replaceChild(this, container); document.body.replaceChild(container, temp); } } } </script>

[24d29df1f64bd6d02bfb602b30daa026.gif_pic_center]: /images/20220828/8a9fc3b2ee6740d3a9078f8d73597a81.png

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 js时实现鼠标拖动div

实现js拖动div 实现步骤： 1. 鼠标按下时，标记元素为可拖动状态，并记下鼠标当前位置的偏移； 2. 鼠标开始移动，判断元素状态是否可以拖动，如果是则更新元素位置

清疚/ 2023年07月24日 05:37/ 0 赞/ 7 阅读

相关 JS+DIV 实现拖动效果

效果图思路代码优化封装以及解决拖动问题事件捕获效果图 ![这里写图片描述][201607281930450

待我称王封你为后i/ 2022年09月24日 10:19/ 0 赞/ 224 阅读

相关 JS_js实现拖动DIV交换位置

![在这里插入图片描述][24d29df1f64bd6d02bfb602b30daa026.gif_pic_center] <!DOCTYPE html> <

怼烎@/ 2022年09月11日 05:28/ 0 赞/ 193 阅读

相关 Js实现无刷新添加新层，拖动DIV层可互换位置

原文：[http://www.csrcode.cn/html/txdm/tcys/1943.htm][http_www.csrcode.cn_html_txdm_tcys_19

痛定思痛。/ 2022年08月07日 05:50/ 0 赞/ 168 阅读

相关可拖动的DIV

<!DOCTYPE html> <html> <head> <title>test</title> <script sr

淡淡的烟草味﹌/ 2022年06月14日 02:18/ 0 赞/ 258 阅读

相关 Dom 可拖动div

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

骑猪看日落/ 2022年06月11日 00:00/ 0 赞/ 241 阅读

相关 Jquery 实现div随意拖动

目的：使div可以拖动。注：单纯用jq也是可以做的，这里使用jquery UI插件使得代码更简单。需要用的到的插件下载：[https://jqueryui.com/

超、凢脫俗/ 2022年05月19日 06:28/ 0 赞/ 409 阅读

相关实现div鼠标拖动效果

实现这个效果的关键是给div的定位设置成absolute,然后获得鼠标移动后的位置坐标并给要移动的div。我将它封装成了一个函数，只需要传入参数即可使用。 dow

深碍√TFBOYSˉ_/ 2022年05月13日 07:36/ 0 赞/ 283 阅读

相关 js 实现拖动dom元素并交换位置

效果图如下: ![20190710111130591.gif][] <!DOCTYPE html> <html> <head> <t

谁践踏了优雅/ 2021年12月12日 04:43/ 0 赞/ 938 阅读

相关 js 鼠标拖动div

div中心跟踪鼠标动而动得到鼠标坐标，移动时div的左上距离为鼠标两坐标减去div左上顶点到中心的距离 div任意位置随鼠标动而动得到鼠标第一次坐标，移动时div

忘是亡心i/ 2021年07月24日 17:05/ 0 赞/ 473 阅读