Search code examples
reactjsreact-propsreact-beautiful-dnd

Draggable Item from component A to B

Is it possible to render the columns within different components and be able to drag items from B -> A and A -> B

enter image description here

There will always be 1 column in Component A and 1+ in B. I'm not sure how I can go about doing this? Do I need two DragDropContext to one in A and B? Can someone give me some guidance on how I can achieve this?

Here is a working example:

Currently, this could be Component B however if I try to implement component A how can I move items between the two.

Edit react-beautiful-dnd tutorial

Solution

  • As per the docs you would not need to have more than one DragDropContext in the same parent Hierarchy.

    So for you use case, I can envision it looking something like this. 

    <App>
   <ComponentA />

   <ComponentB />
</App>

    Each of the component ComponentA and ComponentB will be wrapped in a Droppable.

    And each column in you case will be Draggable.

       <App>
      <DragDropContext>
         <Droppable>
           <ComponentA>
              <Draggable>
                <Column />
              </Draggable>
           </ComponentA>
         </Droppable>

         <Droppable>
           <ComponentB>
              <Draggable>
                <Column />
              </Draggable>

              <Draggable>
                 <Column />
              </Draggable>
           </ComponentB>
         </Droppable>
    </App>

    This is a high level overview on how the hierarchy might look like. ( The top level comp returned by JSX of Column can be Droppable. Like wise for other components. )