Sortable: Cursor changes style while dragging

[philipgiuliani]

When i hover the handle, i get the grabbing cursor style, but when i hold the item than, 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 times.

[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 :
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) :

javascript $('.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;

[neokio]

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.

[neokio]

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