Unable to set CSS cursor on sortable helper
See original GitHub issueAny CSS cursor
property is ignored on the sortable helper, and the cursor on the screen is determined by the background content that the helper is currently being dragged over (this part of the bug is actually the weirdest to me). Example here: https://jsfiddle.net/pufcv77k/3/
The problem appears to have been introduced here: https://github.com/clauderic/react-sortable-hoc/pull/160. It looks like that change fixes scrolling-while-dragging only when the sortable items are in a container with overflow: auto;
, but perhaps I’m missing another scenario?
Not sure what the fix is here, if anything. I’d prefer not to have to set pointer-events: auto !important;
to allow a custom cursor (and quash the weird background cursor behavior), but I’m not sure which behavior is preferred as default.
Issue Analytics
- State:
- Created 6 years ago
- Comments:13
@MtDalPizzol Just in case you didn’t see it, take a look at my example code (https://jsfiddle.net/pufcv77k/3/) for a workaround. Set a
helperClass
(line 33 in my JS) to whatever you want, and then setpointer-events: auto !important;
on that class (lines 15-17 in my CSS). It’s not pretty, but it works. I’m using this workaround to setcursor: grabbing;
in my day job.@rosston I have the same issue and I have found the same workaround withpointer-events: auto !important
but it doesn’t work with Firefox whereas the example of the documentation does.here is my fiddle but I have the same with yours.Do you or @clauderic have any idea?Thanks in advance for your responseEDITActually I have found a way to make it work with Chrome and Firefox without changing the pointer-events but by setting the cursor on the container and the (sortable) items when dragging.
I’m adding a className on the container in
onSortStart
and remove it inonSortEnd
you can see it in my fiddle. It still doesn’t work in Safari unfortunately
I hope it can help