如何检测拖拽element类元素释放时光标是否位于后方同类型元素内？

要实现你需要的功能，核心是在鼠标释放时获取光标位置对应的元素，筛选出符合条件的.element元素（排除当前拖拽的元素），然后执行合并逻辑。以下是修改后的完整代码：

修改后的JavaScript代码 #

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  // 存储鼠标释放时的坐标
  var releaseX, releaseY;

  if (document.getElementById(elmnt.id + "header")) {
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    pos3 = e.clientX;
    pos4 = e.clientY;
    // 将拖拽元素移到父容器末尾，确保视觉层级最上层
    elmnt.parentNode.appendChild(elmnt);
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement(e) {
    e = e || window.event;
    document.onmouseup = null;
    document.onmousemove = null;
    
    // 记录鼠标释放坐标
    releaseX = e.clientX;
    releaseY = e.clientY;
    
    // 查找光标位置下最近的.element元素
    var targetElement = null;
    var current = document.elementFromPoint(releaseX, releaseY);
    while (current && current !== document.body) {
      if (current.classList.contains('element')) {
        targetElement = current;
        break;
      }
      current = current.parentNode;
    }

    // 验证：找到的元素存在且不是当前拖拽的元素
    if (targetElement && targetElement !== elmnt) {
      mergeElements(targetElement);
    }
  }
                
  function mergeElements(behind) {
    elmnt.parentNode.removeChild(elmnt);
    behind.innerHTML = "MERGE TEST";
  }
}

// 初始化所有.element元素的拖拽功能
document.querySelectorAll('.element').forEach(el => dragElement(el));

关键逻辑说明 #

• 捕获释放位置：在closeDragElement中通过事件对象获取鼠标释放时的坐标，确保能精准定位光标指向的元素。
• 筛选目标元素：通过document.elementFromPoint获取光标位置的元素，再向上遍历DOM树匹配.element类，避免光标落在子元素（如<p>）上时无法识别父容器。
• 排除自身触发：添加判断条件，防止拖拽元素自身被误判为合并目标。
• 批量初始化：最后添加的代码让所有带.element类的元素自动具备拖拽功能。

扩展：匹配DOM顺序的“后方”元素 #

如果你的“后方”指DOM结构中拖拽元素之前的元素（因为拖拽时元素被移到父容器末尾），可以修改closeDragElement中的条件判断：

if (targetElement && targetElement !== elmnt) {
  // 对比DOM顺序，只处理拖拽元素之前的元素
  const elements = Array.from(elmnt.parentNode.querySelectorAll('.element'));
  const dragIndex = elements.indexOf(elmnt);
  const targetIndex = elements.indexOf(targetElement);
  if (targetIndex < dragIndex) {
    mergeElements(targetElement);
  }
}

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