css - 拖动时如何更改光标？ Material CDK拖放

Question

使用Material CDK库中的拖放行为，我试图在拖动cdkDrag元素时更改光标。

例如，在this StackBlitz中，光标在悬停时是grab。我希望在拖动时将其更改为grabbing。在Google表格中抓取一行时，会发生以下情况:



阅读the documentation来设计拖放组件的样式，看起来将光标属性添加到此类应该可以解决问题:

.cdk-drop-list-dragging: A class that is added to cdkDropList while the user is dragging an item.

代码如下:

.example-box {
  /* other CSS properties */
  cursor: grab;
}

.cdk-drop-list-dragging {
  cursor: grabbing;
}

但是，正如您在StackBlitz中看到的那样，这似乎并没有改变光标。我猜这是因为此类适用于列表，而不适用于光标。

另一个潜力是 .cdk-drag-preview类:

.cdk-drag-preview: This is the element that will be rendered next to the user's cursor as they're dragging an item in a sortable list. By default the element looks exactly like the element that is being dragged.

这似乎也不起作用。我认为这是因为它更改了光标旁边呈现的元素，而不是光标本身。

关于如何在拖动时更改光标的任何想法？

Answer 1

只需将cursor: grabbing添加到您的example-box:active中

.example-box:active {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
  cursor: grabbing;
}

The :active selector is used to select and style the active link.

A link becomes active when you click on it.

Tip: The :active selector can be used on all elements, not only links.

附加信息在这里

https://www.w3schools.com/cssref/sel_active.asp

Stackblitz

https://stackblitz.com/edit/angular-b8kjj3-r993mc?embed=1&file=app/cdk-drag-drop-overview-example.css