javascript - Vue拖放中的递归组件&递归嵌套

Question

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

有什么方法可以用这个示例实现拖放:

Codesandbox Link

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

这里我只得到拖拽的节点？

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

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

Answer 1

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

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

Codepen - https://codesandbox.io/s/lingering-surf-ckv3y