如何用react-beautiful-dnd实现多行且不水平滚动的水平排序？

Question

我需要将所有可排序元素列在多行上并且没有水平滚动。 看看这个沙箱：https://codesandbox.io/s/react-beautiful-dnd-horizontal-list-forked-smn1s?file=/index.js

目前这也无法实现：

direction="horizontal"

也不与：

direction="vertical"

也许我不太了解package API。

Answer 1

不幸的是

react-beautiful-dnd

不支持网格布局（多行）——它要么是垂直列表，要么是水平列表，正如贡献者向库报告的那样。

在同一个线程中还有一个很棒的 React 代码示例，它实现了多行拖放：

https://codesandbox.io/s/react-grid-drag-k3utz

它的功能基于：

使用 CSS 类从 DOM 获取 Items – 使用
• dragStart

   事件来找出现在正在拖动哪个项目
  – 使用 

  dragOver

   事件处理程序来找出我们正在拖动哪些项目
  – 使用 

  Array.splice

   函数重新排列项目数组，将拖动的项目放置在拖动项目的位置
  – 使用CSS在网格中重新排列项目，计算每个项目的行和列