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

vue.js

2024-03-04 07:53:10

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

问题

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

问题原因

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

解决方法

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

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

修改后的代码

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);
  }
}