vue3 - Vue3+Element-Plus的el-tree如何实现拖动到右边网格功能？

Question

vue3+element-plus里面的el-tree里的表格拖动到右边的网格里，并拿到id

用过vue-draggable-plus但不生效

Answer 1

在 Vue 3 + Element Plus 中实现 el-tree 拖动到右边网格的功能，你需要一个可以处理拖放事件的库，比如 vuedraggable（Vue 2 版本）或者它的 Vue 3 适配版本（如果存在的话）。然而，vue-draggable-plus 可能不是针对 Vue 3 设计的，因此可能无法在 Vue 3 项目中直接使用。

如果你发现 vue-draggable-plus 在 Vue 3 中不生效，你可能需要寻找一个 Vue 3 兼容的拖放库，或者自己实现拖放逻辑。

这里是一个基本的思路，用于实现这个功能：

1. 使用 Vue 3 兼容的拖放库：寻找一个 Vue 3 兼容的拖放库，比如 vuedraggable-next（如果存在）或者其他类似的库。
2. 封装 el-tree 组件：你可以封装一个 el-tree 组件，使其具有拖放功能。在这个组件中，你可以使用拖放库来处理节点的拖动事件。
3. 实现拖动到网格的功能：当用户拖动 el-tree 的节点时，你需要监听拖动事件，并在用户将节点拖动到右边网格时触发相应的处理逻辑。这可能涉及到监听 dragstart、dragover、drop 等事件。
4. 获取节点 ID：在拖动过程中，你可以通过事件对象获取被拖动节点的数据，从而获取其 ID。然后，在将节点放置到网格时，你可以使用这个 ID 进行相应的处理。
5. 更新网格数据：当节点被放置到网格时，你需要更新网格的数据以反映这个变化。这通常涉及到修改你的 Vue 组件的状态或数据。

由于具体的实现细节会依赖于你选择的拖放库以及你的项目结构，我无法提供一个具体的代码示例。但是，上述步骤应该为你提供了一个大致的方向来实现这个功能。

如果你需要更具体的帮助，比如如何选择一个合适的拖放库或者如何实现某个特定的步骤，请提供更多的信息，我会尽力提供帮助。