如何实现鼠标拖动多个div元素？现有单元素拖动代码求改造

直接上可运行的完整代码，核心解决多元素拖动时的状态区分问题：

<!DOCTYPE html>
<html>
<head>
    <style>
        .move {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #ccc;
            border: 1px solid #333;
            cursor: move;
        }
        /* 给不同div设置初始位置方便区分 */
        .move:nth-child(1) { left: 50px; top: 50px; }
        .move:nth-child(2) { left: 200px; top: 50px; }
        .move:nth-child(3) { left: 50px; top: 200px; }
    </style>
</head>
<body>
    <div class="move"></div>
    <div class="move"></div>
    <div class="move"></div>

    <script>
        // 记录当前拖动元素及鼠标偏移量
        let currentDragEl = null;
        let offsetX, offsetY;

        // 选中所有可拖动元素
        const draggables = document.querySelectorAll('.move');

        // 遍历绑定mousedown事件
        draggables.forEach(el => {
            el.addEventListener('mousedown', startDrag);
        });

        function startDrag(e) {
            currentDragEl = this;
            // 计算鼠标在元素内的相对位置，避免拖动跳变
            offsetX = e.clientX - currentDragEl.getBoundingClientRect().left;
            offsetY = e.clientY - currentDragEl.getBoundingClientRect().top;
            
            // 绑定全局移动和结束事件，确保鼠标移出元素仍能响应
            document.addEventListener('mousemove', drag);
            document.addEventListener('mouseup', stopDrag);
        }

        function drag(e) {
            if (!currentDragEl) return;
            // 更新元素位置：当前鼠标坐标 - 偏移量
            currentDragEl.style.left = `${e.clientX - offsetX}px`;
            currentDragEl.style.top = `${e.clientY - offsetY}px`;
        }

        function stopDrag() {
            // 清理事件监听，重置状态
            document.removeEventListener('mousemove', drag);
            document.removeEventListener('mouseup', stopDrag);
            currentDragEl = null;
        }
    </script>
</body>
</html>

关键细节说明 #

• 状态隔离：用currentDragEl记录当前拖动的元素，避免多元素拖动时互相干扰
• 偏移量计算：拖动开始时获取鼠标在元素内的相对坐标，防止元素瞬间跳转到鼠标位置
• 全局事件绑定：把mousemove和mouseup绑定在document上，解决鼠标移出元素后无法结束拖动的问题
• 事件清理：拖动结束后及时移除全局事件监听，避免后续无效触发

你之前用forEach绑定失败，大概率是没处理好当前拖动元素的状态记录，或是把移动事件绑在了元素自身上，导致鼠标移出后拖动失效。

内容的提问来源于stack exchange，提问作者Hightower