使用 react-resizable、react-drag-listview 和 AntDesign table 仅拖动 header 单元格内容的错误

Question

我有一个 Ant Design table，其中的列可以使用 react-resizable and drag-able using react-drag-listview 调整大小。

尽管在某些情况下会出现错误，但所有功能都运行良好，这意味着让这些功能协同工作的整个解决方案可能不可行或无法投入生产。

这是正确的行为 - 当单击 table header 单元格时，整个单元格会被拖动，您可以在其边框周围看到 box-shadow，如下所示：

错误在于，有时在调整列的大小然后单击右侧列的 header 单元格后，不会拖动 header 单元格，只会拖动内容（此中的文本case) / 列标题是，看起来像这样：

Here is a code sandbox 以及有关如何重现错误的分步指南：

1. 转到代码沙箱
2. 单击任意列的右侧边框
3. 将该列向右拖动并调整大小/变大，直到鼠标悬停在其右侧的列标题上，如下所示：

4. 完成此操作后，将鼠标按钮向上抬起并在悬停的列标题上按下，即（单击右侧该列的标题）
5. 拖动列

有时该行为是间歇性的，但很容易重现，如果快速重复这些步骤可能会更明显。

这个bug怎么解决？

Answer 1

出现问题是因为 header 文本默认 select 可拖动。为 dragHandle class 和 th 元素添加以下样式。您将无法在 header 中 select 文本，但好的一面是问题将得到解决。

thead tr th,.dragHandler {
  user-select: none;
}

看看更新后的 example。