js 拖拽排序

作者：我在坚强也需要有人疼发布日期:2025-11-22 浏览:68

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS 拖拽排序</title>
    <style>
        #sortList {
            list-style-type: none;
            padding: 0;
        }
        #sortList li {
            margin: 5px 0;
            padding: 10px;
            background-color: #f0f0f0;
            cursor: move;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>JS 拖拽排序示例</h1>
    <ul id="sortList">
        <li draggable="true">Item 1</li>
        <li draggable="true">Item 2</li>
        <li draggable="true">Item 3</li>
        <li draggable="true">Item 4</li>
        <li draggable="true">Item 5</li>
    </ul>

    <script>
        const sortList = document.getElementById('sortList');
        let draggedItem = null;

        // 添加拖拽事件监听器
        sortList.addEventListener('dragstart', function(event) {
            draggedItem = event.target;
            setTimeout(() => {
                event.target.style.opacity = '0.5';
            }, 0);
        });

        sortList.addEventListener('dragend', function(event) {
            event.target.style.opacity = '1';
        });

        sortList.addEventListener('dragover', function(event) {
            event.preventDefault();
        });

        sortList.addEventListener('dragenter', function(event) {
            if (event.target.tagName === 'LI') {
                event.target.style.backgroundColor = '#ddd';
            }
        });

        sortList.addEventListener('dragleave', function(event) {
            if (event.target.tagName === 'LI') {
                event.target.style.backgroundColor = '#f0f0f0';
            }
        });

        sortList.addEventListener('drop', function(event) {
            if (event.target.tagName === 'LI') {
                event.target.style.backgroundColor = '#f0f0f0';
                if (draggedItem !== event.target) {
                    const parent = event.target.parentNode;
                    const draggedIndex = Array.from(parent.children).indexOf(draggedItem);
                    const targetIndex = Array.from(parent.children).indexOf(event.target);

                    if (draggedIndex < targetIndex) {
                        parent.insertBefore(draggedItem, event.target.nextSibling);
                    } else {
                        parent.insertBefore(draggedItem, event.target);
                    }
                }
            }
        });
    </script>
</body>
</html>

解释说明：

HTML 部分:
- 创建了一个无序列表 (<ul>)，每个列表项 (<li>) 都设置了 draggable="true" 属性，使其可以被拖拽。
CSS 部分:
- 设置了基本的样式，使列表项看起来更美观，并且当用户开始拖拽时，列表项的背景颜色和透明度会发生变化。
JavaScript 部分:
- 使用 addEventListener 监听拖拽事件（dragstart, dragend, dragover, dragenter, dragleave, drop）。
- 当用户开始拖拽某个列表项时，记录下当前拖拽的元素，并调整其透明度。
- 在拖拽过程中，改变目标列表项的背景颜色以提供视觉反馈。
- 当用户释放鼠标时（drop 事件），根据拖拽位置重新排列列表项。

上一篇：js 时间排序

下一篇：js sort()