3

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 components (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 am L
  • 4,288
  • 6
  • 32
  • 49

2 Answers2

4

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.

Kevin Struillou
  • 856
  • 10
  • 19
  • Has something been improved since? I need this functionality... – Guven Degirmenci Mar 15 '21 at 06:52
  • 1
    It goes against the design of the library, so I don't think it will ever happen. – Kevin Struillou Mar 16 '21 at 08:04
  • 5
    Sorry for being late, after your comment I remembered how I managed it, even docs say [It is advised to just wrap your entire application in a ](https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/drag-drop-context.md). That being said, I simply put Droppable wherever I want and you can just drag and drop anywhere, doesn't matter where your Droppable is located at in DOM. – Guven Degirmenci Mar 16 '21 at 13:17
  • Well at least it was ok for my use case. Doesn't answer the question. – Guven Degirmenci Mar 16 '21 at 13:18
0

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

dude_blag
  • 135
  • 1
  • 4
  • 14
  • this doesn't answer the question as the example above shares the same `DragDropContext` parent – I am L Feb 23 '22 at 12:27