递归组件和递归嵌套中的Vue拖放答案

【问题标题】：Vue drag & drop in Recursive component & recursive nesting递归组件和递归嵌套中的Vue拖放
【发布时间】：2023-04-02 00:22:01
【问题描述】：

我正在使用 Vue 创建递归树组件，目前我已经添加了对复选框和扩展节点的支持，但是在递归组件中构建拖放时遇到了一些麻烦

有没有办法用这个示例实现拖放：

我可以得到被拖动的节点，但在放置时我没有得到目标节点？在 Drag stop 上，我只被拖动节点，我应该添加更多地方的侦听器吗？

这里我只被拖拽节点？

 handleDragEnd() {
          this.$el.classList.remove('cmp-drag-node');
      },

注意：我不想要 VueDraggable 的解决方案我正在寻找一个简单的 jsfiddle 或一些关于问题的澄清，Vue draggable 不起作用，因为我不仅需要重新排序节点，还需要放入节点

【问题讨论】：

Vue Draggable 支持嵌套的东西——这行不通？ sortablejs.github.io/Vue.Draggable/#/nested-example
@Adam 它没有按预期工作我需要能够将节点放入具有嵌套子节点的节点中，但这不起作用：/
好的，但不要因为你无法理解而重新发明 cue draggable，你应该使用这个库。你为什么不展示你的尝试，我们可以帮助调试
@Adam 我在这里更新了链接以支持 VueDraggable，但我需要能够将节点放入其他节点（如果该节点是文件夹），codesandbox.io/s/nameless-brook-qcsh3
您能否在问题中添加一些代码？

【解决方案1】：

因此，以下代码笔对我来说很好用。设法处理嵌套组件的拖放，但是你需要更改一些代码。

我用过vuedraggable。主要组件是Tree.vue，节点在Treenode.vue。有时它正在克隆节点，可能我错过了一些东西，但其他一切都很好。

【讨论】：