HTML Drag and Drop：如何确定拖拽落点在目标div内的相对位置

该需求完全可以实现，核心思路是通过投放事件绑定的目标元素获取自身坐标，再和事件坐标做对比即可。

实现步骤 #

• 给目标投放div绑定drop事件监听器，回调中通过事件的currentTarget属性获取目标DOM实例（避免用target防止命中子元素导致取值错误）
• 调用DOM实例的getBoundingClientRect()方法获取元素相对于视口的位置、宽高参数，计算出中心点坐标
• 将拖拽事件的clientX/clientY和中心点坐标做对比，判断所属方位

参考代码 #

// drop事件回调函数
function handleDrop(e) {
  // 获取目标元素实例
  const targetEl = e.currentTarget;
  // 获取元素坐标、尺寸数据
  const rect = targetEl.getBoundingClientRect();
  // 计算元素中心点坐标
  const centerX = rect.left + rect.width / 2;
  const centerY = rect.top + rect.height / 2;
  // 获取拖拽落点坐标
  const dropX = e.clientX;
  const dropY = e.clientY;

  // 判断方位
  const direction = {
    vertical: dropY < centerY ? '上' : '下',
    horizontal: dropX < centerX ? '左' : '右'
  };
  // 可按需求拼接返回结果，比如返回"上左"、"下右"
  return `${direction.vertical}${direction.horizontal}`;
}

特殊场景兼容 #

如果受业务封装限制无法在drop回调中获取目标元素实例，可以在目标元素渲染完成、且后续拖拽过程中元素不会发生位置/尺寸变化的前提下，提前缓存getBoundingClientRect()的返回结果到全局状态中，计算时直接调用缓存数据即可。

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