Angular 6中如何通过pointerup事件获取鼠标释放位置的容器？

嘿，这个需求我太熟了！之前做拖拽组件的时候天天跟这些事件打交道，给你两个实用的实现方案，你可以根据自己的场景选：

这是最直接的方法——在pointerup触发时，通过鼠标的坐标拿到当前点的DOM元素，再往上找到你需要的目标容器（不管是通过类名还是ID匹配都很方便）。

以Vue拖拽指令为例（其他框架可直接复用核心逻辑） #

Vue.directive('drag', {
  mounted(el) {
    el.addEventListener('pointerdown', (startEvt) => {
      // 先存好要拖拽的数据，比如用户要添加的内容
      const dragPayload = { content: '拖拽过来的新内容' };

      // 拖拽过程的移动处理
      const onPointerMove = (moveEvt) => {
        el.style.transform = `translate(${moveEvt.clientX - startEvt.clientX}px, ${moveEvt.clientY - startEvt.clientY}px)`;
      };

      // 鼠标释放时的核心逻辑
      const onPointerUp = (upEvt) => {
        // 先移除全局事件监听，避免内存泄漏
        document.removeEventListener('pointermove', onPointerMove);
        document.removeEventListener('pointerup', onPointerUp);

        // 获取释放位置的DOM元素
        const hitElement = document.elementFromPoint(upEvt.clientX, upEvt.clientY);
        if (!hitElement) return;

        // 查找最近的目标容器：比如找类名为`drop-target`的容器
        const targetContainer = hitElement.closest('.drop-target');
        // 如果是按ID找，就换成 hitElement.closest('#target-container-id')

        if (targetContainer) {
          // 这里就是你要的：给容器添加数据
          const newItem = document.createElement('div');
          newItem.textContent = dragPayload.content;
          targetContainer.appendChild(newItem);
          // 也可以触发自定义事件，让父组件处理数据逻辑
          targetContainer.dispatchEvent(new CustomEvent('dropSuccess', { detail: dragPayload }));
        }

        // 重置拖拽元素的位置
        el.style.transform = '';
      };

      // 绑定全局的移动和释放事件（必须绑在document上，不然鼠标移出元素会失效）
      document.addEventListener('pointermove', onPointerMove);
      document.addEventListener('pointerup', onPointerUp);
    });
  }
});

如果你的可放置容器数量不多，也可以提前给这些容器绑定pointerover/pointerout事件，实时记录当前鼠标停在哪个容器上，这样pointerup时直接用这个记录值就行，不用每次都去查找DOM。

核心代码示例 #

// 全局变量记录当前悬停的容器
let activeDropContainer = null;

// 给所有可放置容器绑定事件
document.querySelectorAll('.drop-target').forEach(container => {
  container.addEventListener('pointerover', () => {
    activeDropContainer = container;
  });
  container.addEventListener('pointerout', () => {
    activeDropContainer = null;
  });
});

// 拖拽的释放处理逻辑
const onPointerUp = (upEvt) => {
  // ...其他清理逻辑
  if (activeDropContainer) {
    // 直接给记录的容器添加数据
    const newItem = document.createElement('div');
    newItem.textContent = '拖拽内容';
    activeDropContainer.appendChild(newItem);
    // 用完记得重置，避免下次拖拽误判
    activeDropContainer = null;
  }
};

• 一定要把pointerup和pointermove绑定在document上！如果绑在拖拽元素本身，鼠标移出元素后事件就不会触发了，直接导致释放逻辑失效。
• closest()方法在现代浏览器都支持，但IE11及以下不兼容，如果要兼容旧浏览器，记得加个polyfill。
• 如果容器有重叠，elementFromPoint()只会返回最上层的元素，这时候可以用document.elementsFromPoint()拿到所有重叠元素，再筛选出符合条件的容器。

内容的提问来源于stack exchange，提问作者Carl.G