如何在vuedraggable中取消未拖至指定占位符的元素拖拽？

问题描述 #

我给每个项都加了占位符，只想让元素在鼠标悬停在占位符上时才能被放置。尝试用move事件做检测，但找到元素后这个检测功能就失效了。下面是我写的move事件代码，完全不起作用：

move(evt) {
      let component = evt.relatedContext.component;
      if (evt) {
        let placeholder =
          evt.originalEvent.target.getAttribute("data-placeholder");

        console.log(placeholder);
        if (placeholder === null) {
          console.log("Não dropar");
          return false;
        }

        let groups = component.componentData.groups;
        let draggedGroup = evt.draggedContext.element.group;
        if (!groups.includes(draggedGroup)) {
          console.log("Não Pode");
          return false;
        }

      
      } else {
        return false;
      }
    },

问题分析&修复方案 #

1. 核心问题：目标元素检测逻辑错误

evt.originalEvent.target 只会取鼠标当前直接触发的元素，要是占位符里还有子元素，就会取不到data-placeholder属性，导致检测失效。

2. 修正后的代码

改成向上遍历DOM，找到带data-placeholder属性的父元素：

move(evt) {
  if (!evt) return false;

  // 向上遍历DOM，精准定位占位符元素
  let placeholderEl = evt.originalEvent.target;
  while (placeholderEl && !placeholderEl.hasAttribute('data-placeholder')) {
    placeholderEl = placeholderEl.parentElement;
  }

  // 没找到占位符，直接阻止放置
  if (!placeholderEl) {
    console.log("不能放置");
    return false;
  }

  const component = evt.relatedContext.component;
  const groups = component.componentData.groups;
  const draggedGroup = evt.draggedContext.element.group;
  
  // 校验分组权限
  if (!groups.includes(draggedGroup)) {
    console.log("不允许该组元素放置");
    return false;
  }

  return true;
}

3. 额外注意事项

• 如果用的是SortableJS这类拖拽库，要确认move事件的返回值规则：部分库需要返回true/false来允许/阻止，有些则需要返回对象指定位置。
• 可以给占位符加专属类名（比如drop-placeholder），用classList.contains判断，比属性检测更高效。

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