Sortable
Sortable copied to clipboard
SortableJS
Cursor changes style while dragging
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
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.
No i haven't. I just left it how the browser means its "default". In OSX its the default cursor in all browsers :( :cry:
+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.
+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.
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.
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.
👍 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)
I'm having this issue as well.
Dragula's grab and grabbing cursors work fine in Chrome: https://bevacqua.github.io/dragula/.
Please reopen...
+1, same issue here. Anyone else figure out a workaround for the grab cursor?
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.
SImilar to @mauriciogior 's workaround, I used "the !important" to the CSS property and that works fine for me 100% of the time.
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");
}
});
I found out that cursor:grabbing doesn't work when the chrome devtools is open.
This is not a sortableJS bug. We wrote our own drag-sort class which has the same issue.
Dragula's grabbing cursors working with additional div element appended to body and listen mousemove - not html5 drag-n-drop
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
