javascript - React-beautiful-dnd:如何将一个元素从不同的 DragDropContext 拖动到另一个 DragDropContext

Question

我想将一个元素从不同的 DragDropContext 移动到另一个元素:

我有一个://侧边栏.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 移动到两个组件的父组件上(我知道该怎么做)，但是除了一个父组件之外还有其他方法DragDropContext??

附注上面的代码不是确切的结构/代码，而是更像一个原型(prototype)，因此您可以可视化，因为我正在开发一个更大的应用程序。

Answer 1

正如您所说，您可以使用单个 DragDropContext 来处理多个 Droppable 之间的 d'n'd。

并且(目前)没有其他方法可以使用 react-beautiful-dnd 来做到这一点。