rlemaigre / Easy-DnD

A drag and drop implementation for Vue.js 2 and 3 https://codesandbox.io/s/easy-dnd-demo-9mbij https://codesandbox.io/s/easy-dnd-demo-2-xnqbz
MIT License
384 stars 52 forks source link

nested droplist blackhole #79

Closed Samuel29 closed 3 years ago

Samuel29 commented 3 years ago

Hi. I'm building a complex UI with draggable nested objects. with easy-dnd

If I start dragging a top level element of my tree, which contains children droplists as well, the original elements don't get disabled, which leads to an inconsistency: I'm able to drop the whole group inside one of its children... which totally makes it disappear... here's a screen capture of the bug: DnD issue you can test it with this example

I think there's a need for a kind of "disabled" flag to be propagated to all the children... but I'm not sure how to do this. Maybe I missed some secret option in the Easy-DND doc ?

rlemaigre commented 3 years ago

Hello,

It's been a while since I worked with this library myself but I think I had that problem once. Could you somehow attribute a "path" to elements in your hierarchy (in the same sense that a file has a path in a hierarchy of folders) ? If you can, then it's easy to solve your problem by using the "accepts-data" prop on Drop(List) components. Simply add the path to the data of draggable components, and disable the drop when the path of the component being dragged is a prefix of the path of the component being dropped into.

Hope this helps :-)

Samuel29 commented 3 years ago

Bonjour Régis et merci °_- clever approach. That's probably how they did in the the main alternative, sortable.js / Vue-Draggable (that being said, I preferred easy-dnd, because it allows better and finer control of the mutations of my data model) I'll try this approach today, and I'll keep you posted

Samuel29 commented 3 years ago

That worked! thanks a bunch. now moving on my next step: after reordering , dropping new items from a separate "template" list with different data structure.