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 移到两个组件的 parent 上（我知道该怎么做），但是 还有其他方法从拥有一个 parent DragDropContext??

P.S。上面的代码并不完全 structure/code 但更像是一个原型，所以你可以想象，因为我正在开发一个更大的应用程序。

Answer 1

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

react-beautiful-dnd.

没有其他方法（现在）

Answer 2

试试 https://react-beautiful-dnd.netlify.app/?path=/story/multiple-horizontal-lists--stress-test 来自 beautiful-dnd

的这个选项

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

React-beautiful-dnd: How to drag one element from a different DragDropContext to another DragDropContext

javascript

drag-and-drop

reactjs

react-beautiful-dnd