在Vue可拖动中如何获取嵌套元素的`relatedContext.element`？

在 Vue 可拖动中获取嵌套元素的 relatedContext.element

问题

在使用 Vue 可拖动时，拖动嵌套元素可能会遇到一个问题：event.relatedContext.element 为空，导致无法获取被拖动元素的信息。

问题原因

在 Vue 可拖动中，relatedContext.element 指的是被拖动元素在放下时的父元素。但在嵌套元素的情况下，父元素可能是嵌套元素本身，而不是目标元素的直接父元素。

解决方法

为了解决此问题，需要修改 Vue 可拖动的 handleMove 方法：

1. 添加代码获取目标元素的父元素。
2. 如果目标元素的父元素是嵌套元素，继续向上查找父元素。
3. 获取目标元素的信息，并与拖动元素的信息一起通过自定义事件分发。

修改后的代码

handleMove(event) {
  // 获取拖动元素的信息
  const movedElement = {
    type: event.draggedContext.element.type,
    id: event.draggedContext.element.id,
  };

  // 获取目标元素的父元素
  let targetParent = event.relatedContext.element.parentElement;

  // 如果目标元素的父元素是嵌套元素，则继续向上查找父元素
  while (targetParent && targetParent.classList.contains('child-elements-container')) {
    targetParent = targetParent.parentElement;
  }

  const targetElement = targetParent.querySelector('.element');

  if (targetElement) {
    // 获取目标元素的信息
    const targetElementInfo = {
      type: targetElement.getAttribute('data-element-type'),
      id: targetElement.getAttribute('data-element-id'),
    };

    // 使用自定义事件分发拖动元素和目标元素的信息
    this.$emit('element-moved', movedElement, targetElementInfo);
  }
}

结论

通过修改 Vue 可拖动的 handleMove 方法，可以成功获取嵌套元素中的 relatedContext.element，并访问拖动元素和目标元素的信息。

常见问题解答

1. 如何监听自定义事件？

在 Vue 组件中，使用 this.$on('element-moved', callback) 监听自定义事件。

2. 可以修改自定义事件名称吗？

可以，但请确保在 handleMove 方法中也相应地修改事件名称。

3. 如何获取 event.draggedContext.element 信息？

event.draggedContext.element 是一个 Vue 组件，包含被拖动元素的信息，如其类型和 ID。

4. 如何在目标元素中查找具体元素？

使用 querySelector 方法，如 targetParent.querySelector('.element')，可以根据类名或其他选择器查找目标元素中特定的元素。

5. 修改后的代码可以在其他 Vue 可拖动版本中使用吗？

这取决于 Vue 可拖动版本的具体实现。建议检查 Vue 可拖动文档以确认兼容性。