时间戳

首页 > 解决方案 > 递归组件和递归嵌套中的Vue拖放

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

问题描述

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

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

代码沙盒链接

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

在这里我只得到拖节点？

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

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

标签： javascriptvue.jsvuejs2

解决方案

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

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

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

推荐阅读