Vue drag & drop in Recursive component & recursive nesting

user_4397306 0
Viewed 1540

Im working with Vue to create recursive Tree component, currently I have added support for checkboxes and expanding nodes, but Im having a bit of trouble with building drag & drop in recursive component

Is there any way to implement drag & drop with this sample:

Codesandbox Link

I can get node that is dragged but on drop I do not get destination node ? On Drag stop I only get dragged node, Should I add on some more places listeners ?

Here I only get dragged node ? 

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

Note: I do not want a solution with VueDraggable Im looking for a simple jsfiddle or some clarification on matter, Vue draggable wont work since I need to drop into the Node not only reorder nodes

vuejs2 vue.js javascript
1 Answers

So the Following codepen works fine for me. Managed to handle drag and drop with nested component but yah you need to change some code.

I have used vuedraggable. The main component is Tree.vue and the nodes are in the Treenode.vue. Sometimes it's cloning the node may bi I have missed something but yah everything else is working fine.

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

user_92726540
Related