如何实现拖拽元素精准放置在目标坐标，避免位置偏移？

你遇到的问题核心是：clientX/clientY是相对于浏览器视口的坐标，但设置absolute定位的left/top时，是相对于父元素（event.target）的坐标，两者基准不一致导致偏移。

修复步骤： #

• 获取目标容器相对于视口的偏移数据
• 计算元素在容器内的相对坐标（视口坐标 - 容器偏移坐标）
• 可选：如果希望鼠标位置对应元素的中心，还需减去元素自身宽高的一半

修改后的代码： #

const onDrop = (event) => {
    event.preventDefault(); // 必须阻止默认行为，避免浏览器默认处理拖拽
    const x = event.clientX;
    const y = event.clientY;
   
    const itemId = event.dataTransfer.getData('text/plain');
    const item = document.getElementById(itemId).cloneNode(true);

    // 获取目标容器的视口偏移
    const targetRect = event.target.getBoundingClientRect();
    // 计算元素在容器内的相对坐标
    const relativeX = x - targetRect.left;
    const relativeY = y - targetRect.top;

    item.style.position = "absolute";
    // 如果要让鼠标位置对应元素左上角，直接用relativeX/relativeY
    item.style.left = `${relativeX}px`;
    item.style.top = `${relativeY}px`;

    // 可选：如果要让鼠标位置对应元素中心，取消下面注释
    // item.style.transform = `translate(-50%, -50%)`;
  
    event.target.appendChild(item);
}

关键说明： #

1. 必须调用event.preventDefault()：默认情况下，浏览器会对drop事件有默认处理（比如打开拖拽的文件），这会干扰你的逻辑，所以一定要阻止。
2. 坐标基准转换：getBoundingClientRect()返回的left/top是容器左上角相对于视口的位置，用视口坐标减去这个值，得到的就是元素在容器内的绝对定位坐标。
3. 元素居中调整：如果拖拽时希望鼠标落点是元素的中心，添加transform: translate(-50%, -50%)即可，这样元素会以设置的left/top为中心定位。

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