vue.js - 如何在el-tree组件中捕获拖拽其他元素并添加标签的行为？

Question

拖拽其他元素到el-tree组件的一个节点上，这个节点后面添加相应的标签，写好了拖拽，但是el-tree组件捕获不到拖拽行为

查过gpt，写了很多el-tree拖拽的属性和函数不生效

Answer 1

在 Element UI 的 el-tree 组件中，原生的实现并不直接支持拖拽其他非树形结构的元素到树节点上并添加标签的功能。但是，你可以通过结合一些额外的库（如 vue-draggable 或其他拖拽库）和自定义逻辑来实现这一功能。

以下是一个基本的思路来实现这一功能：

1. 使用拖拽库：首先，你需要一个拖拽库来捕获拖拽事件。vue-draggable 或其他类似库可以用于 Vue 组件中的拖拽。
2. 定义拖拽目标区域：在 el-tree 组件的某个节点或整个组件上定义一个区域，用于接收拖拽的元素。
3. 监听拖拽事件：使用拖拽库提供的事件监听器来捕获拖拽开始、拖拽中和拖拽结束的事件。
4. 处理拖拽结束事件：在拖拽结束事件中，判断拖拽的元素是否位于 el-tree 的目标区域内。如果是，则执行相应的逻辑，如获取被拖拽元素的数据，并添加到 el-tree 的相应节点作为标签或子节点。
5. 更新 el-tree 数据：根据拖拽的结果，更新 el-tree 的数据源，以反映新的结构或标签。

以下是一个简化的代码示例来说明这个思路：

<template>
  <div>
    <!-- 拖拽区域 -->
    <div ref="dragArea" @dragover.prevent @drop="handleDrop">...</div>

    <!-- el-tree 组件 -->
    <el-tree
      :data="treeData"
      node-key="id"
      ref="tree"
    >
      <!-- ... 其他配置 ... -->
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [/* ... 初始树形数据 ... */],
      draggedData: null, // 存储被拖拽的数据
    };
  },
  methods: {
    handleDragStart(event) {
      // 这里可以根据你的需要设置 draggedData
      this.draggedData = /* ... 获取被拖拽元素的数据 ... */;
    },
    handleDrop(event) {
      if (/* ... 检查是否拖拽到目标区域 ... */) {
        // 获取拖拽结束的节点（如果需要的话）
        const dropNode = this.$refs.tree.getNode(/* ... 获取节点的方法，如通过 id ... */);

        // 根据 draggedData 和 dropNode 执行相应的逻辑
        // 例如，将 draggedData 添加到 dropNode 的某个属性中作为标签
        // 或将 draggedData 作为新的子节点添加到 dropNode

        // 更新树形数据
        this.updateTreeData(dropNode, this.draggedData);
      }
    },
    updateTreeData(node, newData) {
      // ... 更新树形数据的逻辑 ...
      // 使用 Vue 的响应性来更新 this.treeData
    },
  },
  // ... 其他选项 ...
};
</script>

请注意，上述代码只是一个示例，并没有直接涉及 vue-draggable 或其他拖拽库的具体用法。你需要根据自己的需求和所使用的库来调整代码。此外，由于 el-tree 组件本身不支持直接拖拽其他元素到树节点上，因此你可能需要一些额外的逻辑和 UI 设计来实现这一功能。