Nested Drag and Drop with react-beautiful-dnd
react-beautiful-dnd
doesn't support nested drag-drop as of now and it's low priority item as per their roadmap. You need to handle everything on outer <DragDropContext onDragEnd={this.handleDragEnd}>
. It doesn't give parent information by default in result
object, so I have kept that information in child Droppable
component. See the below demo if this works for you.
Code: https://codesandbox.io/s/jp4ow4r45v
Edit: Refer below sandbox for a more generic code snippet where you will be able to apply nested drag-drop across parent container.
just give type to your outer and inner droppable, on drag end you have to check the type of your droppable,and reorder accordingly.
onDragEnd = ({ type, destination, source }) => { if (source && destination && type) { let parentId = source.droppableId; let srcIndex = source.index; let destIndex = destination.index; if (type == "Inner") { //method for reordering the order of the inner items reorderInner(parentId, srcIndex, destIndex) } else if (type == "Outer") { //method for reordering the order of parent items reorderOuter(srcIndex,destIndex) } }};
I have also been through the same problem and I also used the react-beautiful-dnd but with many custom changes it works but not smoothly and then I have came to see another package named react-nestable and it works as i needed. I am putting a link for that package below - react-nestable npm