原生js实现拖拽改变元素顺序

Kratial

已于 2024-05-22 20:01:02 修改

阅读量726

点赞数 22

文章标签： javascript 前端

于 2024-05-21 19:40:34 首次发布

本文链接：https://blog.csdn.net/Kratial/article/details/139099975

版权

代码展示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            border: 10px solid #000;
        }
        .item{
            margin: 10px 10px 0 10px;
            background-color: aquamarine;
            padding: 10px;
            text-align: center;
        }
        .item:nth-last-child(1){
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
    <h1></h1>
    <script>
        class Demo {
            constructor(data,box,showResBox){
                this.data = data
                this.box = box
                this.showResBox = showResBox
                this.init(data,box,showResBox)
            }
            init (data,box) {
                let fragment = document.createDocumentFragment();
                for (let i = 0; i < data.length; i++) {
                    let div = document.createElement("div")
                    div.setAttribute("class","item")
                    div.setAttribute("draggable",true)
                    div.innerText = data[i]
                    fragment.appendChild(div)
                }
                box.appendChild(fragment)
                this.showResBox.innerHTML = `最终的结果：${data.join('-')}`
                this.handledragstart(box)
                this.handledragover(box)
                this.handledragend(box)
                fragment = null
            }
            changeElemPosition(source,target,parentNode) {
                let sourceNext = source.nextSibling;
                let targetNext = target.nextSibling;
                parentNode.insertBefore(target,sourceNext)
                parentNode.insertBefore(source,targetNext)
            }
            eventFn(e) {
                let that = this
                switch (e.type) {
                    case 'dragstart':
                        if (e.target.className=="item") {
                            that.sourceElem = e.target
                        }
                        return
                    case 'dragover':
                        e.preventDefault()
                        if (e.target.className=="item") {
                            that.targetElem = e.target
                        }
                        return
                    case 'dragend':
                        let temp = []
                        that.changeElemPosition(that.sourceElem,that.targetElem,e.currentTarget)
                        Array.from(e.currentTarget.children).forEach(elem=>{
                            temp.push(Number(elem.innerText)) 
                        })
                        that.data = [...temp]
                        that.showResBox.innerHTML = `最终的结果：${that.data.join('-')}`
                        that.removeEventAndObj(that.eventFn)
                        return
                }
            }
            handledragstart (box) {
                box.addEventListener('dragstart',(e)=>{this.eventFn(e)})
            }
            handledragover (box) {
                box.addEventListener('dragover',(e)=>{this.eventFn(e)})
            }
            handledragend (box) {
                box.addEventListener('dragend',(e)=>{this.eventFn(e)})
            }
            removeEventAndObj(eventFn) {
              this.targetElem = null
              this.sourceElem = null
              this.box.removeEventListener('dragstart',eventFn)
              this.box.removeEventListener('dragover',eventFn)
              this.box.removeEventListener('dragend',eventFn)
            }

        }
        let d = new Demo([1,2,3,4,6],document.querySelector('.box'),document.querySelector('h1'))
    </script>
</body>
</html>