I want to move one element from a different DragDropContext to another:

I have a: // sidebar.js

<DragDropContext onDragEnd={() => console.log('sidebar end drag')}>

    <Droppable droppableId="sidebar">
       {provided => 
        <Draggable 
           ref={provided.innerRef} 
           {...provided.draggableProps} 
           {...other props}
         >
           I can be dragged
         </Draggable>
       }
    </Droppable>

</DragDropContext >

// footerDroppable.js

    <Droppable droppableId="footerDrop">
       {provided => 
        <Draggable 
           ref={provided.innerRef} 
           {...provided.draggableProps} 
           {...other props}
         >
           I'm a footer drag
         </Draggable>
       }
    </Droppable>

</DragDropContext >

// the structure

<div>
  <Sidebar> // first drag context
  <div>
    <footer>
       <other elements />
       <FooterDroppable /> // second drag context
    <footer>
  <div/>

can I move the draggable elemtn from the footer to the sidebar / vice versa?

Sure I can just move the DragDropContext on the parent of both ponents (which I know how to do) but ARE THERE OTHER WAY aside from having a one parent DragDropContext??

P.S. the code above are not the exact structure/code but more like a prototype so you can visualize since I'm working on a bigger app.

I want to move one element from a different DragDropContext to another:

I have a: // sidebar.js

<DragDropContext onDragEnd={() => console.log('sidebar end drag')}>

    <Droppable droppableId="sidebar">
       {provided => 
        <Draggable 
           ref={provided.innerRef} 
           {...provided.draggableProps} 
           {...other props}
         >
           I can be dragged
         </Draggable>
       }
    </Droppable>

</DragDropContext >

// footerDroppable.js

    <Droppable droppableId="footerDrop">
       {provided => 
        <Draggable 
           ref={provided.innerRef} 
           {...provided.draggableProps} 
           {...other props}
         >
           I'm a footer drag
         </Draggable>
       }
    </Droppable>

</DragDropContext >

// the structure

<div>
  <Sidebar> // first drag context
  <div>
    <footer>
       <other elements />
       <FooterDroppable /> // second drag context
    <footer>
  <div/>

can I move the draggable elemtn from the footer to the sidebar / vice versa?

Sure I can just move the DragDropContext on the parent of both ponents (which I know how to do) but ARE THERE OTHER WAY aside from having a one parent DragDropContext??

P.S. the code above are not the exact structure/code but more like a prototype so you can visualize since I'm working on a bigger app.

• javascript
• reactjs
• drag-and-drop
• react-beautiful-dnd

2 Answers 2

As you stated, you can have a single DragDropContext to handle d'n'd between multiple Droppable.

And there's no other way to do it (right now) with react-beautiful-dnd.

Try this option out https://react-beautiful-dndlify.app/?path=/story/multiple-horizontal-lists--stress-test from beautiful-dnd