从组件 A 到 B 的可拖动项目

Question

是否可以在不同的组件中呈现列并能够从 B -> A 和 A -> B 拖动项目

组件 A 中始终有 1 列，组件 B 中始终有 1+ 列。我不确定我该怎么做？我需要两个 DragDropContext 到 A 和 B 中的一个吗？有人可以指导我如何实现这一目标吗？

这是一个工作示例：

目前，这可能是组件 B，但是如果我尝试实现组件 A，我该如何在两者之间移动项目。

Answer 1

根据文档，您不需要在同一个父层次结构中拥有多个 DragDropContext。

所以对于您的用例，我可以设想它看起来像这样。

<App>
   <ComponentA />

   <ComponentB />
</App>

每个组件 ComponentA 和 ComponentB 都将包装在 Droppable 中。

你的案例中的每一列都是 Draggable。

   <App>
      <DragDropContext>
         <Droppable>
           <ComponentA>
              <Draggable>
                <Column />
              </Draggable>
           </ComponentA>
         </Droppable>

         <Droppable>
           <ComponentB>
              <Draggable>
                <Column />
              </Draggable>

              <Draggable>
                 <Column />
              </Draggable>
           </ComponentB>
         </Droppable>
    </App>

这是对层次结构的概览。（由 Column 的 JSX 返回的顶级组件可以是 Droppable。对于其他组件也是如此。）

从组件 A 到 B 的可拖动项目

Draggable Item from component A to B

reactjs

react-props

react-beautiful-dnd