简易的拖拽排序初级版

最新推荐文章于 2025-06-18 16:07:04 发布

一夕ξ

最新推荐文章于 2025-06-18 16:07:04 发布

阅读量230

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签： html javascript 前端

本文链接：https://blog.csdn.net/qq_45387575/article/details/126708001

前端学习专栏收录该内容

77 篇文章

订阅专栏

本文介绍了如何使用HTML5和JavaScript实现列表元素的拖放交互，实现元素在列表内的动态位置调整。通过dragstart, dragover, drop等事件处理，展示了如何判断并执行元素的交换操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
        li {
            list-style: none;
            width: 500px;
            height: 50px;
            background-color: skyblue;
            margin-top: 8px;
            border-radius: 5px 5px 5px;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <ul id="uli">
        <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>
        <li draggable="true">6</li>
    </ul>
    <script>
        var ul = document.getElementsByTagName('ul')[0]
        ul.ondragover = function(event) {
            event.preventDefault()
        }
        var draging
        ul.ondragstart = function(event) {
                draging = event.target //存放被拖动的元素
            } //用到事件委托

        ul.ondrop = function(event) { //重点在于这一部分
                var target = event.target //如果target与darging是同一个元素，就说明放在了同一个位置上，应该不做任何操作，只有当是不同元素的时候，才开始换位
                if (target.nodeName === 'LI' && target !== draging) {
                    //上下交换位置，还是下上交换位置
                    if (getIndex(draging) < getIndex(target)) {
                        target.parentNode.insertBefore(draging, target.nextSibling)
                    } else {
                        target.parentNode.insertBefore(draging, target)
                    }
                }
                setTimeout(refn, 5000) //不操作后进行重新排序
            }
            //获取当前元素的index
        function getIndex(el) {
            var index = 0
            if (!el || !el.parentNode) {
                return -1
            }
            while (el = el.previousElementSibling) {
                index++
            }
            return index
        }
        //排序功能
        function refn(bo) {
            console.log(55); //恢复初始排序,相当于需要对元素进行排序
            var arr = document.getElementById('uli').innerHTML.match(/<li[\s\S]+?<\/li>/g)
            console.log(arr);
            arr.sort(function(a, b) {
                a = parseInt(/\d+/.exec(a)[0], 10);
                b = parseInt(/\d+/.exec(b)[0], 10); //正则表达不会，如果序号改为一，二，这种，应该写那种形式
                return bo ? b - a : a - b
            })
            document.getElementById('uli').innerHTML = arr.join("")
        }
    </script>
</body>

</html>