reactjs - 从组件 A 到 B 的可拖动项

Question

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

Component 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>

这是关于层次结构可能是什么样子的高级概述。JSX（ of返回的顶级 compColumn可以是Droppable。对于其他组件也是如此。）