如何使用 react-dnd 从材质 UI 中拖放 TableHeaderColumn？

Posted 2023-02-25

【中文标题】如何使用 react-dnd 从材质 UI 中拖放 TableHeaderColumn？

【英文标题】：How to drag-n-drop TableHeaderColumn from material UI with react-dnd?

【发布时间】：2016-07-19 11:57:49

【问题描述】：

如何将拖放功能从react-dnd 库应用到TableHeaderColumn component from material ui

问题是 react-dnd 不支持自定义标签并建议将 TableHeaderColumn 包装在 div 中，但 ma​​terial ui 不允许在任何标签中包装表格组件:(

我找不到这个主题的任何例子

【参考方案1】：

答案是 - 至少目前无法使用 react-dnd 来实现。 所以我最终使用了react-sortable-hoc，它可以与材料 UI 表格元素配对使用。

【讨论】：

你能举个例子吗？ React-sortable-hoc 与 material-ui 对我不起作用。

你找到解决办法了吗？

还想看一个react-sortable + material ui的例子

对于之前的评论者来说可能为时已晚，但谷歌仍然把我带到这里。这是一个很好的库，所以这里有一个例子codesandbox.io/s/material-demo-q9313?file=/demo.js

@blah 更新了相同的链接。这是我通常如何进行表排序的基础，您会在列定义上看到 sortFunc，然后是一个处理排序并允许每列/基于不同数据类型的自定义排序的函数。与此库相关，请注意可排序标题上的距离道具。这样可以防止排序立即开始，从而允许注册 onClick 以用于行目的，而不是 mousedown 吃掉列排序的事件