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

Question

使用 Material CDK 库中的拖放行为，我尝试在拖动

cdkDrag

元素时更改光标。

例如，在 this StackBlitz 中，光标悬停时为

grab

。我希望它在拖动时更改为

grabbing

。一个例子是在 Google 表格中抓取一行时发生的情况：

阅读文档来设置拖放组件的样式，看起来向此类添加光标属性应该可以解决问题：

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

代码如下所示：

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

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

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

另一个潜力是

.cdk-drag-preview

类：

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

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

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

Answer 1

以前的解决方案对我不起作用，但以下方法很可能对仍然遇到问题的任何人有用：

首先添加这个全局CSS：

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

并向您的 cdkDrag 元素添加 cdkDragStarted 并将其附加到 .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 上的工作 示例的链接

希望这对您有帮助。

Answer 2

只需将

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

---

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

单击链接后，该链接将变为活动状态。

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

更多信息请点击这里

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

---

堆栈闪电战

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

Answer 3

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

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

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

链接到现场示例

Answer 4

如果我们有这个例子

    <div cdkDropList class="drag-drop-container">
      <div *ngFor="let item of array" cdkDrag>
        // content
      </div>
    </div>

使用.cdk-drop-list-dragging

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

您可能还需要将其添加到其他类中

Answer 5

在链接的 Stackblitz 示例中，您没有使用下拉列表，因此您希望 css 为：

.cdk-drag-dragging {
  cursor: grabbing;
}

在我的例子中，使用表体元素上的列表进行拖放，我使用：

table tbody.cdk-drop-list-dragging td {
  cursor: grabbing !important;
}

Answer 6

// In global styles (styles.scss):
.cdk-drag-preview {
  cursor: grabbing;
  pointer-events: auto !important;
}

对于“@angular/material”：“18.0.0”（不添加类）

Answer 7

只需使用

onmousedown = "changeCursorPoint()"

事件功能 -

private changeCursorPoint(): void {
    document.body.style.cursor = 'grabbing';
}

再次清除该功能

(cdkDropListDropped) = "clearCursorEvent()"

private changeCursorToDefault(): void {
    document.body.style.cursor = 'default';
 }