javascript - 如何在 antd 中开始拖动 React DnD 表的特定行时显示工具提示？

Question

我在项目中使用的是Ant Design的可拖动表格。我想要的是，当有人试图拖动该表的前 2 行时，会出现一个弹出窗口或工具提示或某种警告，告诉它不能被拖动。如果不是这样，至少我希望 DragPreview 不显示正在执行拖动的动画，以便很明显这些行不打算被拖动。

我尝试了很多方法，但一旦开始拖动过程​​就无法完成任何事情。我特别想在拖动时显示工具提示。

以下是用于生成最小工作示例的代码沙箱的链接:

https://codesandbox.io/embed/dazzling-sammet-e41lf

当有人试图拖动表格的前两行时，应显示一 strip 有消息的工具提示。

Answer 1

我发现这是向用户显示此 row 不可拖动的消息的最快方式。

方法一:

当用户将鼠标悬停 到不可拖动的行时，它只会变成红色。您可以对此进行自定义。

index.css

.ant-table-body
  tbody[class="ant-table-tbody"]
  tr[style="cursor: default;"]:hover {
  color: red;
}

方法二:

当用户将鼠标悬停 到不可拖动的行时，它会显示一些消息。您可以根据需要自定义此 CSS。

index.css

.ant-table-body
  tbody[class="ant-table-tbody"]
  tr[style="cursor: default;"]:hover
  td:last-child:after {
  color: red;
  content: " THIS ROW IS NOT DRAGGABLE";
  font-size: 16px;
  font-weight: 800;
}