Support nested list (drag item from parent list into nested child list)

[josephjesseyoung]

Bug or feature request?

Feature request

Feature request

First of all, amazing work here, kudos to the developers! 👍 👍

I've been using this library to develop a React based UI builder. In my use case, I need the sortable feature to work in a nested element. However I noticed in the readme,

"Independent nested lists - a list can be a child of another list, but you cannot drag items from the parent list into a child list"

Currently, my work around for this problem is to use the combine feature with nested element so that an element could go inside another element in the same hierarchy and be the child of that element. However, again, I also noticed that the combine feature only works on elements in the same hierarchy (ex: items from a list cannot be combined with items from a nested list and vice versa).

Is there a plan for the nested list so that items could be dragged everywhere regardless of the nested list level? I think this could be beneficial for some use case.

Sorry for my bad english 😄 and thanks again! great work! 👍

[markdon]

This is something I've had to look at too. Instead of having nested droppables/lists you can instead have one droppable with a 'flat' list of all of your draggables and handle their tree/structure separately. This is what I saw @atlaskit/tree doing and have partially built my own implementation.

It makes calculating the new position and parent a bit harder (I haven't done it yet 😅) , but in the end it might give some advantages. Virtualization/Windowing looks easier with a flat DOM tree.

[alexreardon]

Thanks @markdon!! Yes, that is now @atlaskit/tree works. It is technically a flat structure

[alexreardon]

It could be nice to create a general guide for how to achieve this

[alexreardon]

If somebody wants to go on a journey and document it - it would be great to add as a guide to this project

[josephjesseyoung]

Thanks for the fast reply!! @markdon @alexreardon. Going to try the tree structure and see what I can find

[NeroMorto]

Hello there!
I'm trying to solve the same problem too.

As it seems to me, within the current functionality, it is possible to keep track where (parent or nested list) is current item is being dropped.
On the other hand, creating nested lists can also be done dynamically, based on a new "combine" feature. The union itself can be tracked through the result object's property combine in onDragEnd method. After that, the combined elements can be rendered as a nested list according to changes in app's state.

But on the way to this solution, I faced a number of problems with the animation of moving items from a nested list to the parent.
At first, I tried my implementation - I came across a problem with animation that I could not to solve.
Then I found that there is an ideologically similar example in StoryBook
I made an example by analogy, and also faced the same problems of animation. After that, I decided to check the problem existence on the original example, and was able to reproduce it.

To reproduce the current situation with an example, it is necessary to remove the type attribute in stories/src/vertical-nested/quote-list.jsx:56 (line number) or make it static (for example, 'list').

<Droppable droppableId={list.id} /* type={list.id} */ key={list.id}>

This is necessary for the droppable zones to be of the same type (if I don’t confuse anything, then this is a requirement for moving elements (draggable) between the droppable zones).

If everything described above is ideologically correct, then I face the following problems. This is not all of them, but the most "visually incorrect".

1. When you try to move an item from a nested list to parent, the next animation problem appears when the item is not under the cursor.
   This behavior appears only when we want to move the item above the nested list. If you move it down, then everything looks fine.

Screenshot

2. There are a number of problems with sorting items (including nested lists).

2.1. Dropout of elements from a nested list when trying to re-sort a nested list within a parent.

Screenshot

2.2. Incorrect behavior of elements under a nested list. With a small movement of the cursor with a nested list, you can see the situation when the elements of the parent list jump by a group or one by one at a time.

Screenshots

3. Sometimes it is difficult to insert an item between a nested list and a parent item.

Screenshot

Also, in the process of developing the first prototype, I thought about rerendering an element when it is in state isOnDragging, but faced the fact that this is not possible.
It seems to me that it would be helpful for nested list with a large elements count, since in this case it may not be convenient to keep track of the items under this list. An ability to rerender a large list into a small element, with an appropriately sized placeholder (for a new small element) would solve such a problem. And may be in some other cases.

Right now these are the main problems I have encountered.

Thx for your lib and sorry for my English)

[Duohao]

http://www.bootcss.com/p/layoutit/ @alexreardon , dnd can not do something like this ?

[Haaxor1689]

Can anyone provide source or at least working example of tree drag and drop with react-beautiful-dnd and @atlaskit/tree?

[markdon]

Can anyone provide source or at least working example of tree drag and drop with react-beautiful-dnd and @atlaskit/tree?

There's the atlaskit example here.

@atlaskit/tree can't drag between trees, but it doesn't require a huge amount of changes to make it happen. I came up with something that suits my use shown here.

[srph]

I'm not sure if this has been pointed out before, but this seems to be a valid use-case for nested connected droppables (vertical > horizontal) :

• Widget -> New row
• Widget -> Existing row; new column
• Column -> New row
• Row -> New column

I'm sure this is rather complex to implement (plus it's not in the roadmap). Anyway, just leaving this here. Thanks for all your work @alexreardon :).

[bexoss]

I was trying to implement these features during a few days, But I couldn't catch up using @atlaskit/tree and react-beautiful-dnd together. But I found a proper project today. For anyone like me I suggest to use this project: https://github.com/frontend-collective/react-sortable-tree. It is able to drag-and-drop over parent-child, and support copy behaviors.