css 如何在拖动时更改光标?材质CDK拖放

zpgglvta  于 2023-03-25  发布在  其他
关注(0)|答案(6)|浏览(174)

使用Material CDK库中的拖放行为,我尝试在拖动cdkDrag元素时更改光标。
例如,在this StackBlitz中,光标在悬停时为grab。我希望在拖动时将其更改为grabbing。例如,在Google表格中抓取一行时会发生这种情况:

阅读有关拖放组件样式化的文档,看起来向此类添加cursor属性应该可以做到这一点:
.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:这是当用户拖动可排序列表中的一个项目时,将呈现在用户光标旁边的元素。默认情况下,该元素看起来与正在拖动的元素完全相同。
这似乎也不起作用。我想这是因为它改变了光标旁边呈现的元素,而不是光标本身。
有什么想法如何让光标改变,而拖动?

4ktjp1zp

4ktjp1zp1#

以前的解决方案对我不起作用,但这里有一些东西很可能对任何仍然有问题的人起作用:
首先添加全局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';
    ...
    ...
  }

下面是一个指向工作example on StackBlitz的链接
希望这对你有帮助。

vsdwdz23

vsdwdz232#

只需将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
Stackblitz
https://stackblitz.com/edit/angular-b8kjj3-r993mc?embed=1&file=app/cdk-drag-drop-overview-example.css

56lgkhnf

56lgkhnf3#

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

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

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

链接到live Example

z4bn682m

z4bn682m4#

在你链接的Stackblitz例子中,你没有使用droplist,所以你希望你的css是:

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

在我的例子中,使用列表拖放表体元素,我使用:

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

polhcujo5#

如果我们有这个例子

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

使用.cdk-drop-list-drawing

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

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

a2mppw5e

a2mppw5e6#

使用onmousedown = "changeCursorPoint()"事件函数即可-

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

(cdkDropListDropped) = "clearCursorEvent()"上再次清除该函数

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

相关问题