React-beautiful-dnd：如何将一个元素从另一个DragDropContext拖动到另一个DragDropContext

Question

我想将一个元素从另一个DragDropContext移到另一个：

我有一个： // 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 >

//结构

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

我可以将可拖动元素从页脚移动到侧边栏，反之亦然吗？

当然，我可以将DragDropContext移到两个组件的父级上（我知道该怎么做），但除了拥有一个父级{{1}之外，还有其他方法 } ??

P.S。上面的代码不是确切的结构/代码，而是更像一个原型，因此您可以直观地看到，因为我正在开发一个更大的应用程序。

Answer 1

如前所述，您可以使用一个DragDropContext来处理多个Droppable之间的d'n。

react-beautiful-dnd尚无其他方法（目前）。