Description
Subject of the issue
Related to #3044, but rather than trying to apply the cursor to the item being dragged (since pointer-events
none is required to function properly), it would be beneficial to apply a class to the grid-stack
element when dragging.
Currently, it is possible to apply the cursor using:
.grid-stack:has(.ui-draggable-dragging) {
cursor: grabbing;
}
But this does require ::ng-deep
in an Angular app, which is no longer deprecated, but still meant to be used sparingly, and the out-of-the-box functionality of the library is less than ideal. Also, :has()
is pretty widely supported, but not sure if the library needs to support older browsers or any that have not yet added support.
If the library would apply a class to the grid-stack
element (e.g. grid-stack-dragging
) while the drag is in the progress, it could apply a cursor at that level, and be easier to override with grabbing
if the library wishes to stick with move
and not add configuration for a separate dragging cursor, and would not require ::ng-deep
in Angular apps.
Your environment
- Version: 12.1.1
- Browsers: Tested on Firefox and Chrome, but likely all.
Steps to reproduce
Apparent on the hosted demo: https://gridstackjs.com/demo/title_drag.html
Expected behavior
Ideally, the move
cursor wouldn't revert to the default cursor while dragging. A grid-stack-dragging
class would be applied to the <grid-stack>
element during drag operations for this purpose, and allowing customization.