Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to set CSS cursor on sortable helper

See original GitHub issue

Any 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:

The problem appears to have been introduced here: 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:open
  • Created 6 years ago
  • Comments:13

github_iconTop GitHub Comments

rosstoncommented, Jun 28, 2017

@MtDalPizzol Just in case you didn’t see it, take a look at my example code ( for a workaround. Set a helperClass (line 33 in my JS) to whatever you want, and then set pointer-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 set cursor: grabbing; in my day job.

mcrobacommented, Dec 28, 2017

@rosston I have the same issue and I have found the same workaround with pointer-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 response EDIT

Actually 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 in onSortEnd

you can see it in my fiddle. It still doesn’t work in Safari unfortunately

I hope it can help

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why is "cursor:pointer" effect in CSS not working
Just happened to me, and in my case it was due to a CSS rule pointer-events: none; which was set on a parent...
Read more >
cursor - CSS-Tricks
The cursor property in CSS controls what the mouse cursor will look like when it is located over the element in which this...
Read more >
Sortable Widget | jQuery UI 1.10 Documentation
Moves the sorting element or helper so the cursor always appears to drag from the same position. Coordinates can be given as a...
Read more >
CSS cursor property - W3Schools
CSS can generate a bunch of different mouse cursors: ... cell, The cursor indicates that a cell (or set of cells) may be...
Read more >
Using the HTML5 Drag and Drop API -
To make an object draggable set draggable=true on that element. ... CSS related to drag and drop functionality is the cursor: move property....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found