保持光标在列表之间抓取. @angluar/cdk/drag-drop

Question

我在stackblitz中有这个例子。我在项目中使用@angular/cdk/drag-drop。我尝试将光标更改为cursor:grabb，并在光标向上移动元素和拖动拾取元素时cursor:grabbing。

我使用这一行：

.example-box:active {
cursor:grabbing
}

但它不起作用。我需要做什么？

Answer 1

我知道已经有一段时间了，但我找到了解决问题的方法！

首先添加此全局 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工作示例的链接

希望这有帮助 👨 💻