Cursor changes style while dragging #246

philipgiuliani · 2015-01-28T08:37:40Z

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

The text was updated successfully, but these errors were encountered:

RubaXa · 2015-01-28T08:41:42Z

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

philipgiuliani · 2015-01-28T08:57:20Z

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 · 2015-12-10T21:56:45Z

Were you able to find a workaround for this?

philipgiuliani · 2015-12-11T08:03:10Z

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

mjau-mjau · 2016-03-17T06:45:14Z

+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 · 2016-03-18T23:28:52Z

+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 · 2016-05-06T23:01:19Z

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 · 2016-06-23T10:31:09Z

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 · 2016-08-08T10:41:32Z

+1 Same problem here for Chrome

a5hik · 2016-11-15T22:09:02Z

+1 same problem here too.

adrianenriquez · 2016-12-03T11:30:09Z

+1 same problem here. OSX + Chrome

kateray · 2017-02-13T17:43:58Z

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

cupofjoakim · 2017-03-20T09:50:25Z

+1 Also wishing for this functionality!

brianswisher · 2017-05-08T19:31:19Z

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

cbwiedel · 2017-05-19T21:11:43Z

+1 Please add this functionality!

TaylorFoster90 · 2017-08-17T15:16:50Z

+1 For this functionality.

vikyd · 2017-09-25T06:57:22Z

+1

Oliboy50 · 2017-10-16T15:57:07Z

👍
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 · 2017-12-21T20:07:35Z

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 · 2018-05-08T04:16:39Z

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

worldwideaman · 2018-05-14T12:59:16Z

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

mauriciogior · 2018-05-14T20:38:48Z

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 · 2018-07-20T23:55:55Z

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

Ritooon · 2018-07-25T09:04:11Z

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 · 2018-09-07T23:24:04Z

still not working for chrome

soopdop · 2018-12-05T09:02:58Z

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

rixroll · 2019-02-15T09:52:00Z

@soopdop "fix" solved the mystery for me.

Esger · 2019-05-09T09:58:00Z

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

yulllll · 2019-05-28T12:27:49Z

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

jjzjx118 · 2019-08-07T08:54:13Z

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 · 2019-08-07T09:01:22Z

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 · 2019-08-17T10:28:11Z

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 · 2019-08-30T03:37:51Z

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.

In your html file, write down
<ul id="myTaskList" class="list-group" style="cursor: grab"> .... </ul>
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 · 2019-09-10T12:15:50Z

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 · 2019-12-13T22:17:33Z

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

designosis · 2020-02-11T21:05:31Z

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 · 2020-02-11T22:11:26Z

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

owen-m1 · 2020-02-11T23:01:53Z

@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 · 2020-02-11T23:36:34Z

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

owen-m1 · 2020-02-12T00:17:21Z

@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 · 2020-11-13T08:35:40Z

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 · 2021-11-23T13:59:32Z

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 · 2021-11-30T18:01:31Z

still not working for chrome

thank you chromium!

TejasQ · 2022-02-10T23:37:22Z

ffs

zbigniewkuminski · 2023-01-20T11:26:19Z

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 · 2023-02-08T22:38:59Z

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

jordan-sussman · 2023-11-17T22:06:23Z

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 · 2024-02-24T16:29:08Z

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

philipgiuliani closed this as completed Jan 28, 2015

chriskmnds mentioned this issue Jan 21, 2018

Reorder blocks via drag & drop (v2. using editor dropzones). WordPress/gutenberg#4115

Merged

25 tasks

owen-m1 added the help wanted label Dec 5, 2018

owen-m1 reopened this Dec 5, 2018

sarahLardeau mentioned this issue Mar 18, 2020

Change cursor while dragging SortableJS/Vue.Draggable#815

Closed

Cursor changes style while dragging #246

Cursor changes style while dragging #246

Comments

philipgiuliani commented Jan 28, 2015 • edited

RubaXa commented Jan 28, 2015

philipgiuliani commented Jan 28, 2015

avoliva commented Dec 10, 2015

philipgiuliani commented Dec 11, 2015

mjau-mjau commented Mar 17, 2016

ashley71 commented Mar 18, 2016

taylorpoe commented May 6, 2016

adrianparr commented Jun 23, 2016

lapinvert commented Aug 8, 2016

a5hik commented Nov 15, 2016 • edited

adrianenriquez commented Dec 3, 2016

kateray commented Feb 13, 2017

cupofjoakim commented Mar 20, 2017

brianswisher commented May 8, 2017

cbwiedel commented May 19, 2017

TaylorFoster90 commented Aug 17, 2017

vikyd commented Sep 25, 2017

Oliboy50 commented Oct 16, 2017

EthanDM commented Dec 21, 2017

burlesona commented May 8, 2018

worldwideaman commented May 14, 2018

mauriciogior commented May 14, 2018 • edited

maxr37 commented Jul 20, 2018

Ritooon commented Jul 25, 2018 • edited

icenold commented Sep 7, 2018

soopdop commented Dec 5, 2018 • edited

rixroll commented Feb 15, 2019

Esger commented May 9, 2019

yulllll commented May 28, 2019

jjzjx118 commented Aug 7, 2019

jjzjx118 commented Aug 7, 2019

original0594 commented Aug 17, 2019 • edited

cwhuang29 commented Aug 30, 2019 • edited

Funderburker commented Sep 10, 2019

ghost commented Dec 13, 2019

designosis commented Feb 11, 2020

ghost commented Feb 11, 2020

owen-m1 commented Feb 11, 2020

designosis commented Feb 11, 2020

owen-m1 commented Feb 12, 2020

amirabengaied commented Nov 13, 2020 • edited

twicer-is-coder commented Nov 23, 2021

eduardo-pinheiro commented Nov 30, 2021

TejasQ commented Feb 10, 2022

zbigniewkuminski commented Jan 20, 2023

whaaaley commented Feb 8, 2023

jordan-sussman commented Nov 17, 2023

CalvinJamesHeath commented Feb 24, 2024

philipgiuliani commented Jan 28, 2015 •

edited

a5hik commented Nov 15, 2016 •

edited

mauriciogior commented May 14, 2018 •

edited

Ritooon commented Jul 25, 2018 •

edited

soopdop commented Dec 5, 2018 •

edited

original0594 commented Aug 17, 2019 •

edited

cwhuang29 commented Aug 30, 2019 •

edited

amirabengaied commented Nov 13, 2020 •

edited