js实现使用drag实现元素拖拽排序

最新推荐文章于 2025-10-13 08:35:19 发布

原创最新推荐文章于 2025-10-13 08:35:19 发布 · 1.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #es6 #html5 #html #jquery

js 同时被 2 个专栏收录

6 篇文章

订阅专栏

es6

3 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现HTML元素的拖拽排序功能。通过获取拖拽目标和被替换元素的索引，对数组进行操作，重新排序并合并，从而实现元素的动态排序。文中提供了一个代码实例来详细说明这一过程。

思路：

1.获取到拖拽目标和被替换的目标索引值。

2.数组截取2个索引值之间的数组 dealArr ，数组第一部分resetArr1 ,第二部分resetArr2。

3.比较拖拽元素的索引值和被替换元素的索引值，根据值的大小对dealArr重新排序

4.将 resetArr1、 dealArr、 resetArr2重新合并即为排序后的数组

下面是代码实例，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;}
        div{margin: 30px;}
        .clearfix{ *zoom:1;}
        .clearfix:after{
            content: '';
            display: block;
            visibility: hidden;
            clear: both;
            height: 0px;
        }
        span{
            height: 20px;
            width: auto;
            padding: 0 5px;
            margin: 2px 10px;
            line-height: 20px;
            text-align: center;
            border: 1px solid gold;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="clearfix" id="content"></div>
<script>
    let allarr = ['a','b','c','d','e','f','g','h']
    let query = document.getElementById('content');
    let str='',dragItem,overItem;
    for (let i=0;i<allarr.length;i++){
        str +=`<span class="drapEle" draggable="true" >${allarr[i]}</span>`
    }
    query.innerHTML = str;
    document.addEventListener("drag", function(e) {
        dragItem = e.target.innerText;
    });
    document.addEventListener("dragover", function(e) {
        if(dragItem !== overItem){
            overItem = e.target.innerText;
        }else {
            overItem = '';
        }
    });
    document.addEventListener("dragend", function(e) {
        let orArr = [...allarr];
        let dragindex = orArr.findIndex(item => item == dragItem);
        let overindex = orArr.findIndex(item => item == overItem);
        let reset1=[],reset2 = [];
        if(dragindex!=-1 && overindex !=-1){
            let dealArr = [];
            if(dragindex > overindex){
                dealArr = orArr.slice(overindex,dragindex+1);
                let lastitem = dealArr.pop();
                dealArr = [...[lastitem],...dealArr];
                reset1 = orArr.slice(0,overindex);
                reset2 = orArr.slice(dragindex+1)
            };
            if(dragindex < overindex){
                dealArr = orArr.slice(dragindex,overindex+1);
                let [fisrtitem,...resetarr] = dealArr;
                dealArr = [...resetarr,...[fisrtitem]];
                reset1 = orArr.slice(0,dragindex);
                reset2 = orArr.slice(overindex+1)
            };
            allarr = [...reset1,...dealArr,...reset2];
            str = '';
            for (let i=0;i<allarr.length;i++){
                str +=`<span class="drapEle" draggable="true" >${allarr[i]}</span>`
            }
            query.innerHTML = str;
        }
    });


</script>
</body>
</html>