如何实现同时拖动多个HTML元素 拖动图片时联动移动相邻文本

你的核心问题是只给外层容器加了移动光标样式，没有绑定拖拽逻辑，同时浮动布局导致父容器没有正确包裹子元素，语义结构也存在不规范的问题。调整方案如下：

调整后的完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <style>
        .drag-item {
            cursor: move;
            user-select: none;
            position: relative;
            overflow: auto; /* 清除浮动，保证父容器包裹子元素 */
            width: fit-content;
        }
        .drag-item img {
            width: 50px;
            vertical-align: middle;
        }
        .drag-item h3 {
            float: right;
            margin: 0 0 0 10px;
            line-height: 50px;
        }
    </style>
</head>
<body>
<ol>
    <li>
        <div class="drag-item">
            <img src="hand.png" alt="drag">
            <h3 contenteditable="true">sample</h3>
        </div>
    </li>
    <li><h3 contenteditable="true">sample2</h3></li>
</ol>

<script>
const dragItem = document.querySelector('.drag-item');
let isDragging = false;
let offsetX, offsetY;

// 鼠标按下触发拖拽
dragItem.addEventListener('mousedown', (e) => {
    // 点击的是可编辑文本时，不触发拖拽，避免影响编辑
    if (e.target.tagName === 'H3' && e.target.isContentEditable) return;
    isDragging = true;
    // 计算鼠标点击位置相对于元素左上角的偏移量
    const rect = dragItem.getBoundingClientRect();
    offsetX = e.clientX - rect.left;
    offsetY = e.clientY - rect.top;
});

// 鼠标移动更新位置
document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    // 计算元素新位置
    const x = e.clientX - offsetX;
    const y = e.clientY - offsetY;
    // 用transform移动性能更高，不影响文档流
    dragItem.style.transform = `translate(${x}px, ${y}px)`;
});

// 鼠标松开结束拖拽
document.addEventListener('mouseup', () => {
    isDragging = false;
});
</script>
</body>
</html>

关键调整说明 #

• 修正了HTML语义：ol的直接子元素改为li，符合HTML规范
• 给外层拖拽容器加了overflow: auto清除子元素浮动，保证容器能完整包裹图片和文本，拖拽时是整体移动
• 新增了拖拽逻辑：监听鼠标事件计算偏移量，直接修改外层容器的位置，容器内的所有元素会自然跟随移动
• 做了兼容处理：点击可编辑的文本区域时不会触发拖拽，不影响原有文本编辑功能

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