首页 > 资讯 > 前端开发 > JavaScript >JavaScript实现拖拽排序的方法详解

659

分享到

JavaScript实现拖拽排序的方法详解

2024-04-02 19:04:59 659人浏览独家记忆

摘要

目录实现原理概述代码实现完整代码实现可拖拽排序的菜单效果大家想必都很熟悉，本次我们通过一个可拖拽排序的九宫格案例来演示其实现原理。先看一下完成效果：实现原理概述拖拽原理当鼠

实现原理概述

拖拽原理

当鼠标在【可拖拽小方块】（以下简称砖头）身上按下时，开始监听鼠标移动事件
鼠标事件移动到什么位置，砖头就跟到什么位置
鼠标抬起时，取消鼠标移动事件的监听

排序原理

提前定义好9大坑位的位置（相对外层盒子的left和top）
将9大砖头丢入一个数组，以便后期通过splice方法随意安插和更改砖头的位置
当拖动某块砖头时，先将其从数组中移除（剩余的砖头在逻辑上重新排序）
拖动结束时，将该砖头重新插回数组的目标位置（此时实现数据上的重排）
数组中的9块砖头根据新的序号，对号入座到9大坑位，完成重新渲染

代码实现

页面布局

9块砖头（li元素）相对于外层盒子（ul元素）做绝对定位

	<ul id="box">
	    <li style="background-color:black;top: 10px; left: 10px">1</li>
	    <li style="background-color:black;top: 10px; left: 220px">2</li>
	    <li style="background-color:black;top: 10px; left: 430px">3</li>
	    <li style="background-color:black;top: 220px; left: 10px">4</li>
	    <li style="background-color:black;top: 220px; left: 220px">5</li>
	    <li style="background-color:black;top: 220px; left: 430px">6</li>
	    <li style="background-color:black;top: 430px; left: 10px">7</li>
	    <li style="background-color:black;top: 430px; left: 220px">8</li>
	    <li style="background-color:black;top: 430px; left: 430px">9</li>
	</ul>

样式如下

	    * {
	        margin: 0;
	        padding: 0;
	    }
	
	    html,
	    body {
	        width: 100%;
	        height: 100%;
	    }
	
	    ul,
	    li {
	        list-style: none;
	    }
	
	    ul {
	        width: 640px;
	        height: 640px;
	        border: 10px solid pink;
	        border-radius: 10px;
	        margin: 50px auto;
	        position: relative;
	    }
	
	    li {
	        width: 200px;
	        height: 200px;
	        border-radius: 10px;
	        display: flex;
	        justify-content: center;
	        align-items: center;
	        color: white;
	        font-size: 100px;
	        position: absolute;
	    }

定义砖头的背景色和9大坑位位置

	// 定义9大li的预设背景色
	var colorArr = [
	    "red",
	    "orange",
	    "yellow",
	    "green",
	    "blue",
	    "cyan",
	    "purple",
	    "pink",
	    "gray",
	];
	
	
	const positions = [
	    [10, 10], [220, 10], [430, 10],
	    [10, 220], [220, 220], [430, 220],
	    [10, 430], [220, 430], [430, 430],
	]

找出砖头并丢入一个数组

	var ulBox = document.querySelector("#box")
	var lis = document.querySelectorAll("#box>li")
	
	lis = toArray(lis)

这里我使用了一个将nodeList伪数组转化为真数组的轮子：

	
	function toArray(pArr){
	    var arr = []
	    for(var i=0;i<pArr.length;i++){
	        arr.push(pArr[i])
	    }
	    return arr
	}

给所有砖头内置一个position属性

	
	lis.forEach(
	    (item, index) => item.setAttribute("position", index)
	)

定义正在拖动的砖头

        
        var draggingLi = null;

        // 正在拖动的砖头的zindex不断加加，保持在最上层
        var maxZindex = 9

在身上按下谁就是【正在拖动的砖头】

        
        lis.forEach(
            function (li, index) {
                li.style.backgroundColor = colorArr[index]

                
                li.addEventListener(
                    "selectstart",
                    function (e) {
                        // 阻止掉拖选文本的默认行为
                        e.preventDefault()
                    }
                )

                
                li.addEventListener(
                    "mousedown",
                    function (e) {
                        draggingLi = this
                        draggingLi.style.zIndex = maxZindex++
                    }
                )
            }
        )

在任意位置松开鼠标则停止拖拽

        
        document.addEventListener(
            "mouseup",
            function (e) {
                // 当前砖头自己进入位置躺好
                const p = draggingLi.getAttribute("position") * 1
                // draggingLi.style.left = positions[p][0] + "px"
                // draggingLi.style.top = positions[p][1] + "px"
                move(
                    draggingLi, 
                    {
                        left:positions[p][0] + "px",
                        top:positions[p][1] + "px"
                    }, 
                    200
                    // callback
                )

                // 正在拖拽的砖头置空
                draggingLi = null;
            }
        )

当前砖头从鼠标事件位置回归其坑位时用到动画效果，以下是动画轮子


const move = (element, targetObj, timeCost = 1000, callback) => {
    const frameTimeCost = 40;

    // 500.00px 提取单位的正则
    const regUnit = /[\d\.]+([a-z]*)/;

    // 计算动画总帧数
    const totalFrames = Math.round(timeCost / frameTimeCost);

    // 动态数一数当前动画到了第几帧
    let frameCount = 0;

    
    // const getAttrSpeed = (attr) => (parseFloat(targetObj[attr]) - parseFloat(getComputedStyle(element)[attr]))/totalFrames

    // 存储各个属性的初始值和动画速度
    const ssObj = {};

    
    for (let attr in targetObj) {
        // 拿到元素属性的初始值
        const attrStart = parseFloat(getComputedStyle(element)[attr]);

        // 动画速度 = (目标值 - 当前值)/帧数
        const attrSpeed =
            (parseFloat(targetObj[attr]) - attrStart) / totalFrames;

        // 将【属性初始值】和【属性帧速度】存在obj中 以后obj[left]同时拿到这两个货
        // obj{ left:[0px初始值,50px每帧] }
        ssObj[attr] = [attrStart, attrSpeed];
    }

    
    const timer = setInterval(
        () => {
            // element.style.left = parseFloat(getComputedStyle(element).left)+"px"
            // element.style.top = parseFloat(getComputedStyle(element).top)+"px"
            // element.style.opacity = getComputedStyle(element).opacity

            // 帧数+1
            frameCount++;

            
            for (let attr in targetObj) {
                // console.log(attr, ssObj[attr], totalFrames, frameCount);

                // 用正则分离出单位
                // console.log(regUnit.exec("500px"));
                // console.log(regUnit.exec(0));
                const unit = regUnit.exec(targetObj[attr])[1];

                // 计算出当前帧应该去到的属性值
                const thisFrameValue =
                    ssObj[attr][0] + frameCount * ssObj[attr][1];

                // 将元素的属性掰到当前帧应该去到的目标值
                element.style[attr] = thisFrameValue + unit;
            }

            
            if (frameCount >= totalFrames) {
                // console.log(frameCount, totalFrames);
                clearInterval(timer);

                
                // for (let attr in targetObj) {
                //     element.style[attr] = targetObj[attr];
                //     console.log(attr, getComputedStyle(element)[attr]);
                // }

                // 如果有callback就调用callback
                // if(callback){
                //     callback()
                // }
                callback && callback();
            }
        },

        frameTimeCost
    );

    
    setTimeout(() => {
        
        for (let attr in targetObj) {
            element.style[attr] = targetObj[attr];
            // console.log(attr, getComputedStyle(element)[attr]);
        }
    }, timeCost + frameTimeCost);

    // 返回正在运行的定时器
    return timer;
};

移动鼠标时砖头跟随所有砖头实时洗牌

        
        ulBox.addEventListener(
            "mousemove",
            function (e) {
                
                if (draggingLi === null) {
                    return
                }

                // 拿到事件相对于ulBox的位置   
                var offsetX = e.pageX - ulBox.offsetLeft - 100
                var offsetY = e.pageY - ulBox.offsetTop - 100

                
                offsetX = offsetX < 10 ? 10 : offsetX
                offsetY = offsetY < 10 ? 10 : offsetY
                offsetX = offsetX > 430 ? 430 : offsetX
                offsetY = offsetY > 430 ? 430 : offsetY

                // 将该位置设置给draggingLi
                draggingLi.style.left = offsetX + "px"
                draggingLi.style.top = offsetY + "px"

                
                const newPosition = checkPosition([offsetX, offsetY]);

                // 如果当前砖头的position发生变化 则数据重排
                const oldPosition = draggingLi.getAttribute("position") * 1
                if (newPosition != -1 && newPosition != oldPosition) {
                    console.log(oldPosition, newPosition);

                    
                    // 先将当前砖头拽出数组（剩余的砖头位置自动重排）
                    lis.splice(oldPosition, 1)
                    // 再将当前砖头插回newPosition
                    lis.splice(newPosition, 0, draggingLi)

                    // 打印新数据
                    // logArr(lis,"innerText")

                    // 砖头洗牌
                    shuffle()
                }

            }
        )

坑位检测方法

        
        const checkPosition = (ep) => {
            for (let i = 0; i < positions.length; i++) {
                const [x, y] = positions[i]//[10,10]
                const [ex, ey] = ep//[offsetX,offsetY]

                const distance = Math.sqrt(Math.pow(x - ex, 2) + Math.pow(y - ey, 2))
                if (distance < 100) {
                    return i
                }
            }

            // 没有进入任何坑位
            return -1
        }

砖头洗牌方法

        
        const shuffle = () => {
            for (var i = 0; i < lis.length; i++) {
                lis[i].style.left = positions[i][0] + "px"
                lis[i].style.top = positions[i][1] + "px"

                // 更新自己的位置
                lis[i].setAttribute("position", i)
            }
        }

完整代码实现

主程序

<!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>九宫格拖拽排序</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            width: 640px;
            height: 640px;
            border: 10px solid pink;
            border-radius: 10px;
            margin: 50px auto;
            position: relative;
        }

        li {
            width: 200px;
            height: 200px;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 100px;
            position: absolute;
        }
    </style>
</head>

<body>
    <ul id="box">
        <li style="background-color:black;top: 10px; left: 10px">1</li>
        <li style="background-color:black;top: 10px; left: 220px">2</li>
        <li style="background-color:black;top: 10px; left: 430px">3</li>
        <li style="background-color:black;top: 220px; left: 10px">4</li>
        <li style="background-color:black;top: 220px; left: 220px">5</li>
        <li style="background-color:black;top: 220px; left: 430px">6</li>
        <li style="background-color:black;top: 430px; left: 10px">7</li>
        <li style="background-color:black;top: 430px; left: 220px">8</li>
        <li style="background-color:black;top: 430px; left: 430px">9</li>
    </ul>

    <!-- 
    position 位置
     -->
    <script src="../../../tools/arr_obj_tool.js"></script>
    <script src="../../../tools/animtool.js"></script>

    <script>
        // 定义9大li的预设背景色
        var colorArr = [
            "red",
            "orange",
            "yellow",
            "green",
            "blue",
            "cyan",
            "purple",
            "pink",
            "gray",
        ];

        
        const positions = [
            [10, 10], [220, 10], [430, 10],
            [10, 220], [220, 220], [430, 220],
            [10, 430], [220, 430], [430, 430],
        ]

        var ulBox = document.querySelector("#box")
        var lis = document.querySelectorAll("#box>li")
        
        lis = toArray(lis)

        
        lis.forEach(
            (item, index) => item.setAttribute("position", index)
        )

        
        var draggingLi = null;

        // 正在拖动的砖头的zindex不断加加，保持在最上层
        var maxZindex = 9

        
        lis.forEach(
            function (li, index) {
                li.style.backgroundColor = colorArr[index]

                
                li.addEventListener(
                    "selectstart",
                    function (e) {
                        // 阻止掉拖选文本的默认行为
                        e.preventDefault()
                    }
                )

                
                li.addEventListener(
                    "mousedown",
                    function (e) {
                        draggingLi = this
                        draggingLi.style.zIndex = maxZindex++
                    }
                )
            }
        )

        
        document.addEventListener(
            "mouseup",
            function (e) {
                // 当前砖头自己进入位置躺好
                const p = draggingLi.getAttribute("position") * 1
                // draggingLi.style.left = positions[p][0] + "px"
                // draggingLi.style.top = positions[p][1] + "px"
                move(
                    draggingLi,
                    {
                        left: positions[p][0] + "px",
                        top: positions[p][1] + "px"
                    },
                    200
                    // callback
                )

                // 正在拖拽的砖头置空
                draggingLi = null;
            }
        )

        
        ulBox.addEventListener(
            "mousemove",
            function (e) {
                
                if (draggingLi === null) {
                    return
                }

                // 拿到事件相对于ulBox的位置   
                var offsetX = e.pageX - ulBox.offsetLeft - 100
                var offsetY = e.pageY - ulBox.offsetTop - 100

                
                offsetX = offsetX < 10 ? 10 : offsetX
                offsetY = offsetY < 10 ? 10 : offsetY
                offsetX = offsetX > 430 ? 430 : offsetX
                offsetY = offsetY > 430 ? 430 : offsetY

                // 将该位置设置给draggingLi
                draggingLi.style.left = offsetX + "px"
                draggingLi.style.top = offsetY + "px"

                
                const newPosition = checkPosition([offsetX, offsetY]);

                // 如果当前砖头的position发生变化 则数据重排
                const oldPosition = draggingLi.getAttribute("position") * 1
                if (newPosition != -1 && newPosition != oldPosition) {
                    console.log(oldPosition, newPosition);

                    
                    // 先将当前砖头拽出数组（剩余的砖头位置自动重排）
                    lis.splice(oldPosition, 1)
                    // 再将当前砖头插回newPosition
                    lis.splice(newPosition, 0, draggingLi)

                    // 打印新数据
                    // logArr(lis,"innerText")

                    // 砖头洗牌
                    shuffle()
                }

            }
        )

        
        const checkPosition = (ep) => {
            for (let i = 0; i < positions.length; i++) {
                const [x, y] = positions[i]//[10,10]
                const [ex, ey] = ep//[offsetX,offsetY]

                const distance = Math.sqrt(Math.pow(x - ex, 2) + Math.pow(y - ey, 2))
                if (distance < 100) {
                    return i
                }
            }

            // 没有进入任何坑位
            return -1
        }

        
        const shuffle = () => {
            for (var i = 0; i < lis.length; i++) {
                lis[i].style.left = positions[i][0] + "px"
                lis[i].style.top = positions[i][1] + "px"

                // 更新自己的位置
                lis[i].setAttribute("position", i)
            }
        }

    </script>
</body>

</html>

动画轮子

function moveWithTransition(element, targetObj, duration) {
    element.style.transition = `all ${duration / 1000 + "s"} linear`;
    for (var attr in targetObj) {
        element.style[attr] = targetObj[attr];
    }
    setTimeout(() => {
        element.style.transition = "none";
    }, duration);
}


const move = (element, targetObj, timeCost = 1000, callback) => {
    const frameTimeCost = 40;

    // 500.00px 提取单位的正则
    const regUnit = /[\d\.]+([a-z]*)/;

    // 计算动画总帧数
    const totalFrames = Math.round(timeCost / frameTimeCost);

    // 动态数一数当前动画到了第几帧
    let frameCount = 0;

    
    // const getAttrSpeed = (attr) => (parseFloat(targetObj[attr]) - parseFloat(getComputedStyle(element)[attr]))/totalFrames

    // 存储各个属性的初始值和动画速度
    const ssObj = {};

    
    for (let attr in targetObj) {
        // 拿到元素属性的初始值
        const attrStart = parseFloat(getComputedStyle(element)[attr]);

        // 动画速度 = (目标值 - 当前值)/帧数
        const attrSpeed =
            (parseFloat(targetObj[attr]) - attrStart) / totalFrames;

        // 将【属性初始值】和【属性帧速度】存在obj中 以后obj[left]同时拿到这两个货
        // obj{ left:[0px初始值,50px每帧] }
        ssObj[attr] = [attrStart, attrSpeed];
    }

    
    const timer = setInterval(
        () => {
            // element.style.left = parseFloat(getComputedStyle(element).left)+"px"
            // element.style.top = parseFloat(getComputedStyle(element).top)+"px"
            // element.style.opacity = getComputedStyle(element).opacity

            // 帧数+1
            frameCount++;

            
            for (let attr in targetObj) {
                // console.log(attr, ssObj[attr], totalFrames, frameCount);

                // 用正则分离出单位
                // console.log(regUnit.exec("500px"));
                // console.log(regUnit.exec(0));
                const unit = regUnit.exec(targetObj[attr])[1];

                // 计算出当前帧应该去到的属性值
                const thisFrameValue =
                    ssObj[attr][0] + frameCount * ssObj[attr][1];

                // 将元素的属性掰到当前帧应该去到的目标值
                element.style[attr] = thisFrameValue + unit;
            }

            
            if (frameCount >= totalFrames) {
                // console.log(frameCount, totalFrames);
                clearInterval(timer);

                
                // for (let attr in targetObj) {
                //     element.style[attr] = targetObj[attr];
                //     console.log(attr, getComputedStyle(element)[attr]);
                // }

                // 如果有callback就调用callback
                // if(callback){
                //     callback()
                // }
                callback && callback();
            }
        },

        frameTimeCost
    );

    
    setTimeout(() => {
        
        for (let attr in targetObj) {
            element.style[attr] = targetObj[attr];
            // console.log(attr, getComputedStyle(element)[attr]);
        }
    }, timeCost + frameTimeCost);

    // 返回正在运行的定时器
    return timer;
};

伪数组转真数组轮子


function toArray(pArr){
    var arr = []
    for(var i=0;i<pArr.length;i++){
        arr.push(pArr[i])
    }
    return arr
}

这里大家也可以简单地

const arr = [...pArr]

以上就是javascript实现拖拽排序的方法详解的详细内容，更多关于JavaScript拖拽排序的资料请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript实现拖拽排序的方法详解

本文链接: https://www.lsjlt.com/news/148629.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

JavaScript实现拖拽排序的方法详解

目录实现原理概述代码实现完整代码实现可拖拽排序的菜单效果大家想必都很熟悉，本次我们通过一个可拖拽排序的九宫格案例来演示其实现原理。先看一下完成效果：实现原理概述拖拽原理当鼠...

99+

2022-11-13
js 实现拖拽排序详情

目录1、前言2、实现3、为何不使用HTML拖放API实现？4、总结1、前言拖拽排序对于小伙伴们来说应该不陌生，平时工作的时候，可能会选择使用类似Sortable.js这样的开源库来...

99+

2022-11-12
Javascript实现拖拽排序的代码

运行环境：vue3.2以上,复制张贴运行即可看效果效果如下： <template> <div class="container"> <tr...

99+

2022-11-13
JavaScript怎么实现拖拽排序效果

这篇“JavaScript怎么实现拖拽排序效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“JavaScript怎么实现拖拽...

99+

2023-06-30
vue中实现拖拽排序功能的详细教程

目录原生拖拽 API 实现拖拽设置元素 dragable拖放事件拖拽排序拖拽API + 防抖实现vue awe-dnd 拖拽组件安装 awe-dnd 组件库在 main.js 中将 ...

99+

2022-11-13
原生JS实现拖拽排序的示例代码

目录HTML中的拖拽事件（drag & drop）Coding完整代码说到拖拽，应用场景不可谓不多。无论是打开电脑还是手机，第一眼望去的界面都是可拖拽的，靠拖拽实现...

99+

2022-12-08

JS实现拖拽排序 JS拖拽排序 JS 排序
vue实现列表拖拽排序的示例代码

本文主要介绍了vue实现列表拖拽排序的示例代码，具体如下： <template> <div class="test_wrapper" @drago...

99+

2022-11-13
Android简单实现菜单拖拽排序的功能

目录1、效果2、简介3、功能拆解4、功能实现4.1、实现接口4.1.1、getMovementFlags4.1.2、onMove4.1.3、onSwiped4.2、绑定Recycle...

99+

2022-11-13
react 实现表格列表拖拽排序的示例

目录问题描述思路解析1. react-sortable-hoc2. array-move问题描述在项目开发中，遇到这样一个需求：需要对表格里面的数据进行拖拽排序。效果图如下所示：...

99+

2023-02-01

react 表格列表拖拽排序 react 拖拽排序
HTML5实现元素拖拽的方法

这篇文章将为大家详细讲解有关HTML5实现元素拖拽的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。先上示例：index.htmlXML/HTML Code复制内容到剪...

99+

2022-10-19
Java实现ArrayList排序的方法详解

目录简介法1：JDK8的stream法2：Comparator#compare()法3：Comparable#compareTo()简介说明本文用示例介绍Java的ArrayLi...

99+

2022-11-13
Python实现堆排序的方法详解

本文实例讲述了Python实现堆排序的方法。分享给大家供大家参考，具体如下：堆排序作是基本排序方法的一种，类似于合并排序而不像插入排序，它的运行时间为O(nlogn)，像插入排序而不像合并排序，它是一种原...

99+

2022-06-04

详解方法 Python
ECharts框架Sunburst拖拽功能实现方案详解

目录unburst拖拽unburst 要创建日出图表，需要在系列配置项中声明一系列类型“sunburst”，并在树结构中声明其数据： var option ...

99+

2022-12-23

ECharts Sunburst拖拽 ECharts Sunburst
vue实现拖拽进度条的方法

本文将为大家详细介绍“vue实现拖拽进度条的方法”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“vue实现拖拽进度条的方法”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧...

99+

2023-06-06
Vue实现可拖拽组件的方法

本文为大家分享了Vue实现可拖拽、拖拽组件，供大家参考，具体内容如下描述：组件仅封装拖拽功能，内容通过#header、#default、#footer插槽自定义效果：&nbs...

99+

2022-11-12
android的RecyclerView实现拖拽排序和侧滑删除示例

在平时开发应用的时候，经常会遇到列表排序、滑动删除的需求。如果列表效果采用的是 ListView 的话，需要经过自定义 View 才能实现效果；但是如果采用的是 Recycle...

99+

2022-06-06

示例 recyclerview 排序 Android
vue实现可拖拽div大小的方法

下面看下vue中可拖拽div大小的方法。可封装为全局方法在项目中所需要地方直接调用（mixins）方法：参数： 1.allBox：最外层第div class；2.leftBox...

99+

2022-11-13
聊聊GridView实现拖拽排序及数据交互的问题

在研究项目中的一个效果的时候，查找资料过程中发现有人有这么一种需求，就是GridView在实现拖拽排序的基础上，如果是两个GridView之间实现拖拽效果，并要实现数据交互。一、效...

99+

2022-11-12
JavaScript实现基础排序算法的示例详解

目录前言正文1、冒泡排序2、选择排序3、插入排序4、快速排序前言文本来总结常见的排序算法，通过 JvavScript 来实现正文 1、冒泡排序算法思想：比较相邻两个...

99+

2022-11-13
php实现归并排序算法的方法详解

目录php实现归并排序算法归并排序原理总结php实现归并排序算法归并排序算法的复杂度是O(nlogn)。代码如下,只需要clone下来执行composer install然后执行...

99+

2022-11-13