Cursor changes style while dragging

[philipgiuliani]

When i hover the handle, i get the grabbing cursor style, but when I hold the item, it switches back to the default cursor.

Its also reproducible in the following example: http://jsbin.com/newize/1/edit?html,js,output

Tested in Chrome, Firefox

[RubaXa]

You have the wrong CSS: http://jsbin.com/moqecozofo/1/edit

[philipgiuliani]

I cant see any difference it the example, i still get the "default" cursor while i am dragging the item.

Seems that the browser handles this cursor. When i change dataTransfer.effectAllowed to "copy" for example, the cursor is an copying cursor, but "move" shows the default cursor. Im on OSX by the way. I think this cant be fixed.

[avoliva]

Were you able to find a workaround for this?

[philipgiuliani]

No i haven't. I just left it how the browser means its "default". In OSX its the default cursor in all browsers :( :cry:

[mjau-mjau]

+1. Is it impossible to apply a CSS cursor on drag? Maybe it's only OSX, but it defaults to "default" cursor on drag, regardless.

[ashley71]

+1. Setting the cursor style in CSS for the .sortable-ghost kept the cursor style when dragging in Firefox, but not in Safari or Chrome.

[taylorpoe]

This is an issue for me too on chrome. During drag cursor is reset not default. Not the behavior I want and css isn't getting my anywhere.

[adrianparr]

Here is a demo. https://codepen.io/adrianparr/pen/VaddEr

On Mac OSX it works in Firefox, but NOT in Chrome, Safari or Opera. I've not tested on Windows.

[lapinvert]

+1 Same problem here for Chrome

[a5hik]

+1 same problem here too.

[adrianenriquez]

+1 same problem here. OSX + Chrome

[kateray]

+1 OSX / still works Firefox but not Chrome or Safari

[cupofjoakim]

+1 Also wishing for this functionality!

[brianswisher]

+1 OSX / still works Firefox but not Chrome or Safari

[cbwiedel]

+1 Please add this functionality!

[TaylorFoster90]

+1 For this functionality.

[vikyd]

+1

[Oliboy50]

👍 please reopen this issue (even if it's impossible to fix for the owner... at least we know that there's a bug right now)

[EthanDM]

I'm having this issue as well.

Dragula's grab and grabbing cursors work fine in Chrome: https://bevacqua.github.io/dragula/.

Please reopen...

[burlesona]

+1, same issue here. Anyone else figure out a workaround for the grab cursor?

[worldwideaman]

+1, still facing the issue in chrome. Waiting for any workaround...

[mauriciogior]

I found a workaround. Add this css:

html.draggable-cursor {
    cursor: move; /* fallback: no `url()` support or images disabled */
    cursor: -webkit-grabbing; /* Chrome 1-21, Safari 4+ */
    cursor:    -moz-grabbing; /* Firefox 1.5-26 */
    cursor:         grabbing; /* W3C standards syntax, should come least */
}

Now add these two events:

// Sets default page cursor as grabbing
onStart: function (evt) {
    document.documentElement.classList.add("draggable-cursor");
}
...
// Restores default page cursor
onEnd: function (evt) {
    document.documentElement.classList.remove("draggable-cursor");
}

It is not perfect though, it works 60% ~ 80% of the time.

[maxr37]

SImilar to @mauriciogior 's workaround, I used "the !important" to the CSS property and that works fine for me 100% of the time.

[Ritooon]

Found a workaroun that works 100% of the time too. Used a mixed betwee, @maxr37 and @mauriciogior workarounds.

I used this css :

.draggable-cursor * {
    cursor: move !important; /* fallback: no `url()` support or images disabled */
    cursor: -webkit-grabbing !important; /* Chrome 1-21, Safari 4+ */
    cursor:    -moz-grabbing !important; /* Firefox 1.5-26 */
    cursor:         grabbing !important; /* W3C standards syntax, should come least */
}

And then in my .js file (Using jquery-ui draggable) :

$('.draggableElement').draggable({
    start: function (evt) {
        $('html').addClass("draggable-cursor");
    },
    stop: function (evt) {
        $('html').removeClass("draggable-cursor");
    }
});

[icenold]

still not working for chrome

[soopdop]

I found out that cursor:grabbing doesn't work when the chrome devtools is open.

[rixroll]

@soopdop "fix" solved the mystery for me.

[Esger]

This is not a sortableJS bug. We wrote our own drag-sort class which has the same issue.

[yulllll]

Dragula's grabbing cursors working with additional div element appended to body and listen mousemove - not html5 drag-n-drop

[jjzjx118]

html.draggable-cursor {
  cursor: move; /* fallback: no `url()` support or images disabled */
  cursor: -webkit-grabbing; /* Chrome 1-21, Safari 4+ */
  cursor:    -moz-grabbing; /* Firefox 1.5-26 */
  cursor:         grabbing; /* W3C standards syntax, should come least */
}

can you give a example , I have no idea where to put those codes

[jjzjx118]

This is not a sortableJS bug. We wrote our own drag-sort class which has the same issue.

@Esger , hi can you give a example ? how to control the cursor when start drag and draging?

[original0594]

Got a fix! Had to enable the sortableJS forceFallback option and put in some custom CSS for my drag handle. UPDATE, needed some additional JS to stop a flash of going back to grab mid-drag

my SortableJS options (related): handle: '.dragHandle', chosenClass: 'isSelected', forceFallback: true, fallbackClass: 'isSelected',

onStart: function (evt) { let all = document.querySelectorAll('.dragHandle') all.forEach(function(element) { element.classList.add('grabbing') }) }, onEnd: function (evt) { let all = document.querySelectorAll('.drag-handle-td') all.forEach(function(element) { element.classList.remove('grabbing') }) },

and the CSS: .dragHandle { cursor: grab !important; } .grabbing, .isSelected, .isSelected > .dragHandle { cursor: grabbing !important; }

[cwhuang29]

Hi everyone, I found a easy way to set up the cursor. It will show "grab" while hovering, and "grabbing" while clicking and dragging the mouse.

1. In your html file, write down <ul id="myTaskList" class="list-group" style="cursor: grab"> .... </ul>
2. Move to your JS file, and paste on the code below (Don't forget to set forceFallback to true)

   Sortable.create(myTaskList, {
   group: '',
   animation: 50,
   forceFallback: true,
   onChoose: function (evt) { $("#myTaskList").css('cursor', 'grabbing'); }, // Run when you click
   onStart: function (evt) { $("#myTaskList").css('cursor', 'grabbing'); }, // Dragging started
   onEnd: function (evt) { $("#myTaskList").css('cursor', 'grab'); }, // Dragging ended
   });

   I've tested in Chrome and Firefox, both work well.

[Funderburker]

item gets class .sortable-chosen on mousedown & .sortable-ghost when you start to actually drag it. so I added this to my css

.sortable-ghost, .sortable-chosen {
    cursor: grabbing;
}

[ghost]

For the ghost-class add this. It works quite well. pointer-events: none;

[designosis]

Thanks to prior posts, I've been able to create consistent UX with SortableJS cursors:

https://jsbin.com/buretaw/edit?html,css,js,output

We begin with:

When hovering over a handle, the cursor becomes grab:

When clicking, and also when dragging, the cursor becomes grabbing:

The only problem is that the solution above requires forceFallback: true.

What even is forceFallback? Is it a performance thing, or does it break mobile swiping? Does anyone know the consequences of forcing fallback?

[ghost]

@neokio forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in

[owen-m1]

@neokio It just makes it so it won't use the native drag and drop API. It won't affect mobile since all mobile devices will be using the fallback by default.

[designosis]

I'll rephrase. What are the benefits of forceFallback: false that are lost by setting it to true?

[owen-m1]

@neokio You lose access to the native drag and drop API that the browser provides. For example, you can't use the setData option.

[amirabengaied]

I still facing the issue and i can't use forceFallback: true because the ghost contains input with values ​​initiated and when I set this option to true I no longer see the values. and I cannot drag components that have a shadow

[twicer-is-coder]

I found out that cursor:grabbing doesn't work when the chrome devtools is open.

Dude Thanks a lot man. I was going crazy why the hell it was not working. When dev tools are opened. You always get incorrect behavior when doing something like grab and grabbing on mouse up and mouse down event.

[eduardo-pinheiro]

still not working for chrome

thank you chromium!

[TejasQ]

ffs

[zbigniewkuminski]

Is there a way of customize the cursor with default forceFallback? Or at least to set it as "unable to drop" in few scenarios?

[whaaaley]

I couldn't get this to work even when dev tools are closed...

[jordan-sussman]

Marking that as of today, Chrome still doesn't handle cursor:grabbing properly with dev tools open. It's something to still be aware of if you're troubleshooting something like this.

Thanks @soopdop (comment).

I found out that cursor:grabbing doesn't work when the chrome devtools is open.

[CalvinJamesHeath]

I can't get it to work on Chrome. Devtools is closed.

[EndorphinE19]

Hi, in Chrome with ForceFallback = fasle you still can't change the cursor via dataTransfer.effectAllowed (Windows)