Draggable Item from component A to B

Question

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

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.

You don't need to re-invent the wheel. Get this: https://www.npmjs.com/package/react-draggable — , Nov 11 '19 at 19:31

score 1 · Accepted Answer · answered Nov 11 '19 at 19:37

1

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. )

answered Nov 11 '19 at 19:37

Sushanth --

55,259
9
66
105

Looking at my initialdata in codesandbox. Would you say I need a new InitialData2 = { ... } if I simply just want only one column in component A? – Freddy. Nov 11 '19 at 19:40
@Freddy. Not really. As long as you have a mapping of which task falls under which column one object should be good enough. That is the reason for the key `taskIds: ['task-1', 'task-2', 'task-3', 'task-4']` which states that `column-1` has the following tasks listed – Sushanth -- Nov 11 '19 at 19:45
that is true however with the current implementation. I use map() function to map to populate all column within component B. If I do the same to component A there be more than 1 column. So having said this, I may need another object with only 1 column with the same data structure however it will still allow me to move A->B and B->A – Freddy. Nov 11 '19 at 19:49
@Freddy It all depends on the data structure that you want to use. If there is correlation between different objects, it just depends on how you envision it. You can get the same thing working with a single object or having multiple objects and then have a mapping some how. – Sushanth -- Nov 11 '19 at 20:01
Yes, I understand now. Thanks for the high-level overview. – Freddy. Nov 11 '19 at 20:12

Draggable Item from component A to B

1 Answers1