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

更新時間：2022年12月07日 14:15:35 作者：你也向往長安城嗎

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

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

事件類型

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

Coding

寫一段簡單的CSS和html ，實現(xiàn)初始的頁面

        *{
            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>

此時我們的頁面如下圖

現(xiàn)在還不可以進行拖拽操作，為了可以實現(xiàn)拖拽操作，我們必須給每個元素設置 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)可以基礎的拖拽

接下來我們需要在JS中對DOM元素進行一系列操作來實現(xiàn)對應的效果

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

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

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

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

這里會出現(xiàn)奇怪的一幕就是，拖動的樣式和原來的樣式同時變成了透明。這是因為跟隨鼠標拖動的元素的樣式在拖動的那一刻是原始元素的樣式，所以也會添加"moving"，那么在這里我們加一個異步

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

到這里距離目標又更近了一步，

接下來我們需要在拖動的過程中對列表的元素進行重新的排序

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

        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)
            }
        })

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

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

至此，一個簡單的拖拽排序功能就實現(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實現(xiàn)拖拽排序的示例代碼的詳細內(nèi)容，更多關于JS拖拽排序的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

JS實現(xiàn)從表格中動態(tài)刪除指定行的方法
這篇文章主要介紹了JS實現(xiàn)從表格中動態(tài)刪除指定行的方法,通過getElementById獲取指定行再使用deleteRow方法來實現(xiàn)刪除行的功能,具有一定參考借鑒價值,需要的朋友可以參考下
2015-03-03
JavaScript中的scrollTop詳解(滾動到頂部)
scrollTop是JavaScript中一個非常有用且重要的方法,它用于獲取或設置元素的垂直滾動條位置,這篇文章主要給大家介紹了關于JavaScript中scrollTop詳解(滾動到頂部)的相關資料,需要的朋友可以參考下
2023-12-12
javascript實現(xiàn)全角轉半角的方法
這篇文章主要介紹了javascript實現(xiàn)全角轉半角的方法,涉及JavaScript字符串遍歷與編碼轉換的相關技巧,需要的朋友可以參考下
2016-01-01
JavaScript實現(xiàn)簡單獲取當前網(wǎng)頁網(wǎng)址的方法
這篇文章主要介紹了JavaScript實現(xiàn)簡單獲取當前網(wǎng)頁網(wǎng)址的方法,通過location對象的href方法來獲取網(wǎng)址,非常簡單實用,需要的朋友可以參考下
2015-11-11
JavaScript常用腳本匯總（二）
本文給大家分享的javascript常用腳本有把JavaScript中的偽數(shù)組轉換為真數(shù)組、JavaScript設置主頁功能、JavaScript收藏功能、javascript檢測元素是否支持某個屬性代碼、創(chuàng)建和使用命名空間，有需要的小伙伴們快來看看吧。
2015-03-03
微信小程序在Tab的icon上顯示消息數(shù)量的方法
這篇文章主要介紹了微信小程序在Tab的icon上顯示消息數(shù)量的方法,首先,在app.json文件中,找到對應的tabBar配置,本文通過示例代碼給大家介紹的非常詳細,需要的朋友可以參考下
2024-08-08
js獲取隱藏元素寬高的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s獲取隱藏元素寬高的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
JavaScript和JQuery的鼠標mouse事件冒泡處理
這篇文章主要介紹了JavaScript和JQuery的鼠標mouse事件冒泡處理,本文總結出了mouse事件的一些定論,并分別給出了JavaScript和JQuery測試代碼,需要的朋友可以參考下
2015-06-06
微信小程序獲取當前位置和城市名
這篇文章主要介紹了微信小程序獲取當前位置和城市名的思路,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-11-11
前端如何實現(xiàn)動畫過渡效果
這篇文章主要介紹了前端如何實現(xiàn)動畫過渡效果，幫助大家更好的理解和學習前端開發(fā)網(wǎng)頁，感興趣的朋友可以了解下
2021-02-02