Drag&drop to different position inside parent

[drbarto]

Hey,

is there a way to use drag&drop to move a node to a specific position inside the target parent node?

E.g. assuming this tree:

root
   child A
   child B
   child C

Is it possible to move "child C" to a different position inside its current parent node, e.g. between A and B?

root
   child A
   child C
   child B

So far I only managed to apply drag&drop to move nodes to a different parent, where they are appended as the last child (using vue-tree 5.1.0).

[grapoza]

Sure! When dragging over a node you'll see a grey bar (assuming the default styles) which act as drop targets to place a node before or after that node. In case there's some styling differences in your case, here's the documentation for drag and drop that has this.

[drbarto]

@grapoza thanks for the reply! I tried what you said and indeed, I eventually managed to place a node between other nodes. Unfortunately, the behavior is too unreliable for my use case: most of the time the node still gets inserted as a child node when I intend to place it next to another node.

Do you have a tip how to improve this, e.g. by applying custom styling and thereby increasing the size of the drop targets?

[grapoza]

Hey @drbarto, sorry for the delayed reply. You can certainly style the drop targets to be slightly larger, for instance with

.grtv-wrapper.grtv-default-skin .grtvn-self-drop-target .grtvn-self-sibling-drop-target {
  height: 20px;
}

[grapoza]

Closing due to inactivity.