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

谁践踏了优雅 2021-12-12 04:43 951阅读 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>
        
        <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