拖拽结束时定位元素问题：无法获取落点精确left/top坐标

原生dragend事件无法直接获取元素的最终放置坐标，需要结合drop事件来记录位置——drop是元素被成功放置时触发的事件，能拿到鼠标在目标容器内的精确位置。

实现方案 #

• 用全局变量存储放置坐标
• 在drop事件中计算元素需要的top和left值
• 在dragend事件中调用存储的坐标设置元素位置

修改后的完整代码 #

HTML部分

<div class="box1">
  <div id="item-1" class="item">1</div>
  <div id="item-2" class="item" draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)">2</div>
  <div id="item-3" class="item">3</div>
  <div id="item-4" class="item">4</div>
</div>
<div id="box-2" class="box2" ondragover="dragOver(event)" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)"></div>

JavaScript部分

// 全局存储放置位置坐标
let dropPosition = { top: 0, left: 0 };

// 必须阻止默认行为，否则drop事件不会触发
function dragOver(event) {
  event.preventDefault();
}

function dragStart(event) {
  // 传递被拖拽元素的ID，方便drop事件中定位元素
  event.dataTransfer.setData('text/plain', event.target.id);
}

function drop(event) {
  event.preventDefault();
  const targetBox = event.currentTarget;
  const draggedItemId = event.dataTransfer.getData('text/plain');
  const draggedItem = document.getElementById(draggedItemId);
  
  // 获取目标容器的视口位置
  const boxRect = targetBox.getBoundingClientRect();
  // 计算鼠标在容器内的相对坐标（这里让元素中心对齐鼠标，可根据需求调整）
  dropPosition.left = event.clientX - boxRect.left - draggedItem.offsetWidth / 2;
  dropPosition.top = event.clientY - boxRect.top - draggedItem.offsetHeight / 2;
  
  // 将元素移动到目标容器
  targetBox.appendChild(draggedItem);
}

function dragEnd(event) {
  const draggedItem = event.target;
  draggedItem.style.position = "absolute";
  // 应用存储的坐标
  draggedItem.style.top = `${dropPosition.top}px`;
  draggedItem.style.left = `${dropPosition.left}px`;
}

// 可选：处理拖拽进入/离开的视觉反馈
function dragEnter(event) {
  event.currentTarget.style.border = '2px dashed #333';
}

function dragLeave(event) {
  event.currentTarget.style.border = '';
}

关键说明 #

• 如果不需要元素中心对齐鼠标，直接去掉计算坐标时的- draggedItem.offsetWidth/2和- draggedItem.offsetHeight/2即可
• dragstart事件是必须的，用来传递被拖拽元素的标识，否则drop事件无法准确找到目标元素
• 目标容器的样式需要设置position: relative，否则绝对定位的元素会相对于整个文档定位

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