拖动时如何更改光标？材料CDK拖放

Question

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

例如，在此StackBlitz中，光标悬停时为grab。我希望它在拖动时变为抓取。这方面的一个例子是在Google工作表中抓取一行时发生的情况：

读取样式化拖放组件的留档，看起来向这个类添加游标属性应该可以做到这一点：

. cdk-drop-list-draging：当用户拖动项目时添加到cdkDropList的类。

代码如下所示：

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

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

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

另一个潜力是. cdk-drad-preview类：

.cdk拖动预览：当用户拖动可排序列表中的项目时，将在其光标旁边呈现该元素。默认情况下，元素看起来与正在拖动的元素完全相同。

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

关于如何在拖动时更改光标，有什么想法吗？

Answer 1

就我自己而言，我添加了以下样式覆盖，以便在拖动时重新启用自定义光标。

.draggable-element .drag-handle{
  cursor: grab;
}

.draggable-element.cdk-drag-preview .drag-handle{
  pointer-events: auto;
  cursor: grabbing;
}

链接到实例

Answer 2

只需将光标：抓取添加到示例框：活动

.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;
}

：活动选择器用于选择活动链接并设置其样式。

当您单击链接时，它将变为活动链接。

提示：活动选择器可以用于所有元素，而不仅仅是链接。

这里有更多信息

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

闪电战

https://stackblitz.com/edit/angular-b8kjj3-r993mc?embed=1

Answer 3

以前的解决方案对我不起作用，但这里有一些东西很可能对任何仍然有问题的人起作用：

首先添加这个全局CSS：

body.inheritCursors * {
  cursor: inherit !important;
}

并将cdkDragStarted添加到cdkDrag元素中，并将其附加到。ts文件：

<div cdkDrag (cdkDragStarted)="dragStart($event)"></div>

在. ts文件中，当拖动开始和停止时，您可以切换所需的光标：

bodyElement: HTMLElement = document.body;

  dragStart(event: CdkDragStart) {
    this.bodyElement.classList.add('inheritCursors');
    this.bodyElement.style.cursor = 'move'; 
    //replace 'move' with what ever type of cursor you want
  }

  drop(event: CdkDragDrop<string[]>) {
    this.bodyElement.classList.remove('inheritCursors');
    this.bodyElement.style.cursor = 'unset';
    ...
    ...
  }

这里有一个链接，指向StackBlitz的一个工作示例

希望这是有帮助的。