React-beautiful-dnd：如何将一个元素从不同的 DragDropContext 拖到另一个 DragDropContext答案

【问题标题】：React-beautiful-dnd: How to drag one element from a different DragDropContext to another DragDropContextReact-beautiful-dnd：如何将一个元素从不同的 DragDropContext 拖到另一个 DragDropContext
【发布时间】：2019-11-27 13:58:41
【问题描述】：

我想将一个元素从另一个 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 移动到两个组件的父级上（我知道该怎么做），但是除了有一个父级DragDropContext 之外，还有其他方式吗？？

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

【问题讨论】：

标签： javascript reactjs drag-and-drop react-beautiful-dnd

【解决方案1】：

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

并且（现在）没有其他方法可以使用react-beautiful-dnd。

【讨论】：

从那以后有什么改进吗？我需要这个功能...
这违背了图书馆的设计，所以我认为它永远不会发生。
抱歉迟到了，在您发表评论后，我记得我是如何管理它的，甚至文档都说It is advised to just wrap your entire application in a <DragDropContext />。话虽如此，我只是将 Droppable 放在任何我想要的地方，你可以拖放到任何地方，不管你的 Droppable 在 DOM 中的位置。
好吧，至少我的用例没问题。不回答问题。

【解决方案2】：

从beautiful-dnd 试试这个选项https://react-beautiful-dnd.netlify.app/?path=/story/multiple-horizontal-lists--stress-test

【讨论】：

这不能回答问题，因为上面的示例共享相同的DragDropContext parent