原生JS實(shí)現(xiàn)拖拽排序的示例代碼

更新時(shí)間：2022年12月07日 14:15:35 作者：你也向往長(zhǎng)安城嗎

說(shuō)到拖拽，應(yīng)用場(chǎng)景不可謂不多。無(wú)論是打開(kāi)電腦還是手機(jī)，第一眼望去的界面都是可拖拽的，靠拖拽實(shí)現(xiàn)APP或者應(yīng)用的重新布局，或者拖拽文件進(jìn)行操作文件。本文就將利用JS實(shí)現(xiàn)拖拽排序，需要的可以參考一下

HTML中的拖拽事件（drag & drop）

參考MDN中文文檔

事件類型

drag ：當(dāng)拖拽的元素或者選中的文本時(shí)觸發(fā)
dragend ：當(dāng)拖拽元素結(jié)束時(shí)觸發(fā)
dragenter ：當(dāng)拖拽元素或選中的文本到一個(gè)可釋放目標(biāo)時(shí)觸發(fā)
dragleave ：當(dāng)拖拽元素或選中的文本離開(kāi)一個(gè)可釋放目標(biāo)時(shí)觸發(fā)
dragover ：當(dāng)元素或選中的文本被拖到一個(gè)可釋放目標(biāo)上時(shí)觸發(fā)（每 100 毫秒觸發(fā)一次）
dragstart ：當(dāng)用戶開(kāi)始拖拽一個(gè)元素或選中的文本時(shí)觸發(fā)
drop ：當(dāng)元素或選中的文本在可釋放目標(biāo)上被釋放時(shí)觸發(fā)

Coding

寫(xiě)一段簡(jiǎn)單的CSS和html ，實(shí)現(xiàn)初始的頁(yè)面

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul{
            margin: 200px auto;
            width: 200px;
            list-style-type: none;
        }
        li{
            margin: 5px;
            text-align: center;
            width: 200px;
            height: 30px;
            background: skyblue;
        }
        .list .moving{
            background: transparent;
            color: transparent;
            border: 1px dashed #ccc;
        }

    <ul class="list">
        <li >1</li>
        <li >2</li>
        <li >3</li>
        <li >4</li>
        <li >5</li>
    </ul>

此時(shí)我們的頁(yè)面如下圖

現(xiàn)在還不可以進(jìn)行拖拽操作，為了可以實(shí)現(xiàn)拖拽操作，我們必須給每個(gè)元素設(shè)置 draggable="true"

    <ul class="list">
        <li draggable="true">1</li>
        <li draggable="true">2</li>
        <li draggable="true">3</li>
        <li draggable="true">4</li>
        <li draggable="true">5</li>
    </ul>

元素已經(jīng)可以基礎(chǔ)的拖拽

接下來(lái)我們需要在JS中對(duì)DOM元素進(jìn)行一系列操作來(lái)實(shí)現(xiàn)對(duì)應(yīng)的效果

實(shí)現(xiàn)拖出去的元素，原位置樣式變?yōu)橥该魈摼€
實(shí)現(xiàn)拖動(dòng)到其他元素上時(shí)，列表順序發(fā)生改變

        let list = document.querySelector('.list')
        let currentLi      // 記錄拖拽元素

我們用事件委托，監(jiān)聽(tīng) "dragstart" 事件，給拖動(dòng)的元素添加類名，修改樣式，這里會(huì)出現(xiàn)奇怪的一幕就是，拖動(dòng)的樣式和原來(lái)的樣式同時(shí)變成了透明。

        list.addEventListener('dragstart',(e)=>{
            e.dataTransfer.effectAllowed = 'move'   // 拖動(dòng)樣式改為 "move"
            currentLi = e.target  
            currentLi.classList.add('moving')
        })

這里會(huì)出現(xiàn)奇怪的一幕就是，拖動(dòng)的樣式和原來(lái)的樣式同時(shí)變成了透明。這是因?yàn)楦S鼠標(biāo)拖動(dòng)的元素的樣式在拖動(dòng)的那一刻是原始元素的樣式，所以也會(huì)添加"moving"，那么在這里我們加一個(gè)異步

        list.addEventListener('dragstart',(e)=>{
            e.dataTransfer.effectAllowed = 'move'
            currentLi = e.target
            setTimeout(()=>{
                currentLi.classList.add('moving')
            })
        })

到這里距離目標(biāo)又更近了一步，

接下來(lái)我們需要在拖動(dòng)的過(guò)程中對(duì)列表的元素進(jìn)行重新的排序

Node.insertBefore()：方法在參考節(jié)點(diǎn)之前插入一個(gè)擁有指定父節(jié)點(diǎn)的子節(jié)點(diǎn)

        list.addEventListener('dragenter',(e)=>{
            e.preventDefault()  // 阻止默認(rèn)事件
            if(e.target === currentLi||e.target === list){   // 當(dāng)移動(dòng)到當(dāng)前拖動(dòng)元素，或者父元素上面我們不做操作
                return
            }
            let liArray = Array.from(list.childNodes)
            let currentIndex = liArray.indexOf(currentLi)   // 獲取到拖動(dòng)元素的下標(biāo)
            let targetindex = liArray.indexOf(e.target)     // 獲取到目標(biāo)元素的下標(biāo)

            if(currentIndex<targetindex){
                list.insertBefore(currentLi,e.target.nextElementSibling)
            }else{
                list.insertBefore(currentLi,e.target)
            }
        })

最后我們需要在拖拽結(jié)束將元素的moving類名移除,以及阻止拖拽到一個(gè)目標(biāo)上的默認(rèn)事件（否則會(huì)出現(xiàn)禁止）

        list.addEventListener('dragover',(e)=>{
            e.preventDefault()
        })
        list.addEventListener('dragend',(e)=>{
            currentLi.classList.remove('moving')
        })

至此，一個(gè)簡(jiǎn)單的拖拽排序功能就實(shí)現(xiàn)了

完整代碼

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul{
            margin: 200px auto;
            width: 200px;
            list-style-type: none;
        }
        li{
            margin: 5px;
            text-align: center;
            width: 200px;
            height: 30px;
            background: skyblue;
        }
        .list .moving{
            background: transparent;
            color: transparent;
            border: 1px dashed #ccc;
        }  
        </style>
</head>
<body>
    <ul class="list">
        <li draggable="true">1</li>
        <li draggable="true">2</li>
        <li draggable="true">3</li>
        <li draggable="true">4</li>
        <li draggable="true">5</li>
    </ul>

    <script>
        let list = document.querySelector('.list')
        let currentLi
        list.addEventListener('dragstart',(e)=>{
            e.dataTransfer.effectAllowed = 'move'
            currentLi = e.target
            setTimeout(()=>{
                currentLi.classList.add('moving')
            })
        })

        list.addEventListener('dragenter',(e)=>{
            e.preventDefault()
            if(e.target === currentLi||e.target === list){
                return
            }
            let liArray = Array.from(list.childNodes)
            let currentIndex = liArray.indexOf(currentLi)
            let targetindex = liArray.indexOf(e.target)

            if(currentIndex<targetindex){
     
                list.insertBefore(currentLi,e.target.nextElementSibling)
            }else{
      
                list.insertBefore(currentLi,e.target)
            }
        })
        list.addEventListener('dragover',(e)=>{
            e.preventDefault()
        })
        list.addEventListener('dragend',(e)=>{
            currentLi.classList.remove('moving')
        })
    </script>
</body>
</html>

以上就是原生JS實(shí)現(xiàn)拖拽排序的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于JS拖拽排序的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: