-
Notifications
You must be signed in to change notification settings - Fork 3.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Cursor changes style while dragging #246
Comments
You have the wrong CSS: |
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 |
Were you able to find a workaround for this? |
No i haven't. I just left it how the browser means its "default". In OSX its the default cursor in all browsers :( 😢 |
+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 |
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. On Mac OSX it works in Firefox, but NOT in Chrome, Safari or Opera. |
+1 Same problem here for Chrome |
+1 same problem here too. |
+1 same problem here. OSX + Chrome |
+1 OSX / still works Firefox but not Chrome or Safari |
+1 Also wishing for this functionality! |
+1 OSX / still works Firefox but not Chrome or Safari |
+1 Please add this functionality! |
+1 For this functionality. |
+1 |
👍 |
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? |
+1, still facing the issue in chrome. Waiting for any workaround... |
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");
}
}); |
still not working for chrome |
I found out that cursor:grabbing doesn't work when the chrome devtools is open. |
@soopdop "fix" solved the mystery for me. |
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 |
can you give a example , I have no idea where to put those codes |
@Esger , hi can you give a example ? how to control the cursor when start drag and draging? |
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):
and the CSS: |
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.
I've tested in Chrome and Firefox, both work well. |
item gets class .sortable-chosen on mousedown & .sortable-ghost when you start to actually drag it.
|
For the ghost-class add this. It works quite well. |
Thanks to prior posts, I've been able to create consistent UX with SortableJS cursors: https://jsbin.com/buretaw/edit?html,css,js,output When hovering over a handle, the cursor becomes When clicking, and also when dragging, the cursor becomes The only problem is that the solution above requires What even is |
@neokio |
@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. |
I'll rephrase. What are the benefits of |
@neokio You lose access to the native drag and drop API that the browser provides. For example, you can't use the |
I still facing the issue and i can't use forceFallback: true because |
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. |
thank you chromium! |
ffs |
Is there a way of customize the cursor with default forceFallback? Or at least to set it as "unable to drop" in few scenarios? |
I couldn't get this to work even when dev tools are closed... |
I can't get it to work on Chrome. Devtools is closed. |
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: