原生js 多个div拖拽互换位置

原创已于 2024-08-08 10:52:39 修改 · 689 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #css #html #html5 #css3

于 2021-04-02 17:25:06 首次发布

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用原生JavaScript实现多个可拖拽DIV元素的位置互换。通过简单的HTML结构与CSS样式，结合JavaScript事件监听，实现了灵活的拖放交互效果。

该文章已生成可运行项目，

用原生js实现多个div拖拽互换位置

html代码

<div id="big">
        <div class="lit" draggable="true">1</div>
        <div class="lit" draggable="true">2</div>
        <div class="lit" draggable="true">3</div>
        <div class="lit" draggable="true">4</div>
        <div class="lit" draggable="true">5</div>
        <div class="lit" draggable="true">6</div>
        <div class="lit" draggable="true">7</div>
        <div class="lit" draggable="true">8</div>
    </div>

css样式采用flex布局

#big{
            margin: 0 auto;
            width: 400px;
            height: 200px;
            background-color: beige;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            align-content: space-around;
            
        }
        .lit{
            border: 1px solid #789;
            width: 80px;
            height: 80px;
            
        }

js部分

//获取小方块
    var lit = document.getElementsByClassName("lit");
    var con = null;
    for(let i=0; i<lit.length; i++){
        //拖动时，用con保存lit
        lit[i].ondragstart = function(){
            con = this;
        }
        lit[i].ondragover = function(){
            event.preventDefault();
        }

        //拖动结束时，在当前位置下 进行drop事件
        var big = document.getElementById("big")
        lit[i].ondrop = function(){
            if(con != null && con!=this){
                var abc = document.createElement("div");
                big.replaceChild(abc,this);
                big.replaceChild(this,con);
                big.replaceChild(con,abc)
            }
        }

    }