使用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:这是当用户拖动可排序列表中的一个项目时,将呈现在用户光标旁边的元素。默认情况下,该元素看起来与正在拖动的元素完全相同。
这似乎也不起作用。我想这是因为它改变了光标旁边呈现的元素,而不是光标本身。
有什么想法如何让光标改变,而拖动?
6条答案
按热度按时间4ktjp1zp1#
以前的解决方案对我不起作用,但这里有一些东西很可能对任何仍然有问题的人起作用:
首先添加全局CSS:
并向cdkDrag元素添加cdkDragStarted并将其附加到.ts文件中的方法:
在.ts文件中,您可以在拖动开始和停止时切换所需的光标:
下面是一个指向工作example on StackBlitz的链接
希望这对你有帮助。
vsdwdz232#
只需将
cursor: grabbing
添加到example-box:active
: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
56lgkhnf3#
对于我自己,我添加了以下样式覆盖,以在拖动时重新启用自定义光标。
链接到live Example
z4bn682m4#
在你链接的Stackblitz例子中,你没有使用droplist,所以你希望你的css是:
在我的例子中,使用列表拖放表体元素,我使用:
polhcujo5#
如果我们有这个例子
使用.cdk-drop-list-drawing
您可能还需要将其添加到其他类中
a2mppw5e6#
使用
onmousedown = "changeCursorPoint()"
事件函数即可-在
(cdkDropListDropped) = "clearCursorEvent()"
上再次清除该函数