This lib works fine overall, but I am running into an issue with nodes that have no children.
Description
When implementing a nested tree with drag-and-drop, dragging an item onto a tree node that has no children is not currently supported. The node has no children's zone rendered, so no drop zone is registered and the drag operation is rejected.
To Reproduce
- Implement a tree using makeDraggable / makeDroppable per the tree example
- Create two sibling nodes, both with no children
- Attempt to drag one node onto the other to nest it as a child
Expected Behavior
The target node should accept the drop and become the parent of the dragged item.
Actual Behavior
The drop is rejected. No drop zone exists for the target node because it has no children, so the children container is either not rendered (v-if) or hidden (v-show / display: none), and IntersectionObserver does not register it as a valid drop target.
Root Cause
makeDroppable registers a drop zone via IntersectionObserver. If the children container element is not visible in the DOM (either unmounted via v-if or hidden via display: none), IntersectionObserver reports an intersection ratio of 0 and the zone is never registered as a valid target.
Workaround
No acceptable workarounds (AFAIK).
Environment
@vue-dnd-kit/core v2.x
Vue 3
Nuxt 3
Example
Item 1
Item 1.1
Item 1.2
Item 2
Item 3
Item 3.1
I can drag Item 3 (and its descendants) to Item 1, but not to Item 2.
This lib works fine overall, but I am running into an issue with nodes that have no children.
Description
When implementing a nested tree with drag-and-drop, dragging an item onto a tree node that has no children is not currently supported. The node has no children's zone rendered, so no drop zone is registered and the drag operation is rejected.
To Reproduce
Expected Behavior
The target node should accept the drop and become the parent of the dragged item.
Actual Behavior
The drop is rejected. No drop zone exists for the target node because it has no children, so the children container is either not rendered (v-if) or hidden (v-show / display: none), and IntersectionObserver does not register it as a valid drop target.
Root Cause
makeDroppable registers a drop zone via IntersectionObserver. If the children container element is not visible in the DOM (either unmounted via v-if or hidden via display: none), IntersectionObserver reports an intersection ratio of 0 and the zone is never registered as a valid target.
Workaround
No acceptable workarounds (AFAIK).
Environment
@vue-dnd-kit/core v2.x
Vue 3
Nuxt 3
Example
Item 1
Item 1.1
Item 1.2
Item 2
Item 3
Item 3.1
I can drag Item 3 (and its descendants) to Item 1, but not to Item 2.