创建一个可以在 React 上拖放列和行的表

Posted 2023-05-08

【中文标题】创建一个可以在 React 上拖放列和行的表

【英文标题】：Creating a table that can drag and drop both columns and rows on React

【发布时间】：2020-03-26 21:25:06

【问题描述】：

我想。我查看了其他解决方案，例如react-beautiful-dnd、table-dragger 等。到目前为止我发现的最好的解决方案是ag Grid，但这需要我获得许可证。我一直在寻找其他解决方案，甚至尝试自己在 React 中构建这个功能。有没有人了解如何实现此功能，甚至推荐其他有助于实现此功能的解决方案。

【参考方案1】：

您可以为此目的使用不同的开源软件包。无需自己实现。一些值得研究的例子：

react-table-hoc-draggable-columns react-sortable-hoc material-table

【讨论】：

谢谢！我将深入研究所有这些选项。但是，只看一眼这些选项，它们似乎并不支持同时拖放 行和列。 （抱歉不清楚）关于如何使用这些库中的任何一个来实现该功能的任何见解？

react-sortable-hoc 中的Grid 选项似乎允许您拖放行和列。

【参考方案2】：

dnd-kit帮我实现了列拖行。诀窍是仅在需要时才启用列 OR 行拖动。 UI 似乎不太可能需要同时拖动一列和一行。因此，在我的情况下，如果我将鼠标悬停在列标题上，dnd-kit 使用水平拖动设置，但如果我将鼠标悬停在行“标题”上，则 dnd-kit 使用垂直拖动设置。这使得看起来它们都可以同时发生，而实际上是一次发生。

以下是一些相关的示例代码行供您开始使用。

const [columnHover,setColumnHover] = React.useState(false);
<DndContext
    modifiers=[columnHover ? restrictToHorizontalAxis : restrictToVerticalAxis]
>
    <SortableContext
        items=columnHover ? columnIDs : rowIDs
        strategy=columnHover ? horizontalListSortingStrategy : verticalListSortingStrategy
    >
        ...
    </SortableContext>
</DndContext>