CSS For Grabbing Cursors (drag & Drop)


Answer :

In case anyone else stumbles across this question, this is probably what you were looking for:



.grabbable {
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}

/* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}


I think move would probably be the closest standard cursor value for what you're doing:




move

Indicates something is to be moved.




CSS3 grab and grabbing are now allowed values for cursor.
In order to provide several fallbacks for cross-browser compatibility3 including custom cursor files, a complete solution would look like this:



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

.draggable:active {
cursor: url(images/grabbing.cur);
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
}


Update 2019-10-07:



.draggable {
cursor: move; /* fallback: no `url()` support or images disabled */
cursor: url(images/grab.cur); /* fallback: Chrome 1-21, Firefox 1.5-26, Safari 4+, IE, Edge 12-14, Android 2.1-4.4.4 */
cursor: grab; /* W3C standards syntax, all modern browser */
}

.draggable:active {
cursor: url(images/grabbing.cur);
cursor: grabbing;
}


Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android SDK Location Should Not Contain Whitespace, As This Cause Problems With NDK Tools