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.
Subject of the issue
Related to #3044, but rather than trying to apply the cursor to the item being dragged (since
pointer-eventsnone is required to function properly), it would be beneficial to apply a class to thegrid-stackelement when dragging.Currently, it is possible to apply the cursor using:
But this does require
::ng-deepin 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-stackelement (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 withgrabbingif the library wishes to stick withmoveand not add configuration for a separate dragging cursor, and would not require::ng-deepin Angular apps.Your environment
Steps to reproduce
Apparent on the hosted demo: https://gridstackjs.com/demo/title_drag.html
Expected behavior
Ideally, the
movecursor wouldn't revert to the default cursor while dragging. Agrid-stack-draggingclass would be applied to the<grid-stack>element during drag operations for this purpose, and allowing customization.