CSS to capture cursors (drag and drop)

Question

I have a JavaScript webapp where the user has to capture the background in order to move the entire screen around. So I want the cursor to change when they hover over the background. The -moz-grab and -moz-grabbing CSS -moz-grabbing perfect for this. Of course, they only work in Firefox ... are there equivalent cursors for other browsers? Should I do something more ordinary than standard CSS cursors?

Answer 1

I think move is likely to be the closest standard cursor value for what you do:

step
Indicates that something needs to be moved.

Answer 2

If anyone else comes 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; } 

Answer 3

CSS3 grab and grabbing now allow values ​​for cursor . To provide multiple cross-browser compatibility backups, 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; } 

Answer 4

“more individual” than CSS cursors means some kind of plugin, but you can completely specify your own cursors using CSS. I think this list has what you want:

 .alias {cursor: alias;} .all-scroll {cursor: all-scroll;} .auto {cursor: auto;} .cell {cursor: cell;} .context-menu {cursor: context-menu;} .col-resize {cursor: col-resize;} .copy {cursor: copy;} .crosshair {cursor: crosshair;} .default {cursor: default;} .e-resize {cursor: e-resize;} .ew-resize {cursor: ew-resize;} .grab {cursor: grab;} .grabbing {cursor: grabbing;} .help {cursor: help;} .move {cursor: move;} .n-resize {cursor: n-resize;} .ne-resize {cursor: ne-resize;} .nesw-resize {cursor: nesw-resize;} .ns-resize {cursor: ns-resize;} .nw-resize {cursor: nw-resize;} .nwse-resize {cursor: nwse-resize;} .no-drop {cursor: no-drop;} .none {cursor: none;} .not-allowed {cursor: not-allowed;} .pointer {cursor: pointer;} .progress {cursor: progress;} .row-resize {cursor: row-resize;} .s-resize {cursor: s-resize;} .se-resize {cursor: se-resize;} .sw-resize {cursor: sw-resize;} .text {cursor: text;} .url {cursor: url(https://www.w3schools.com/cssref/myBall.cur),auto;} .w-resize {cursor: w-resize;} .wait {cursor: wait;} .zoom-in {cursor: zoom-in;} .zoom-out {cursor: zoom-out;} 

 <h1>The cursor Property</h1> <p>Hover mouse over each to see how the cursor looks</p> <p class="alias">cursor: alias</p> <p class="all-scroll">cursor: all-scroll</p> <p class="auto">cursor: auto</p> <p class="cell">cursor: cell</p> <p class="context-menu">cursor: context-menu</p> <p class="col-resize">cursor: col-resize</p> <p class="copy">cursor: copy</p> <p class="crosshair">cursor: crosshair</p> <p class="default">cursor: default</p> <p class="e-resize">cursor: e-resize</p> <p class="ew-resize">cursor: ew-resize</p> <p class="grab">cursor: grab</p> <p class="grabbing">cursor: grabbing</p> <p class="help">cursor: help</p> <p class="move">cursor: move</p> <p class="n-resize">cursor: n-resize</p> <p class="ne-resize">cursor: ne-resize</p> <p class="nesw-resize">cursor: nesw-resize</p> <p class="ns-resize">cursor: ns-resize</p> <p class="nw-resize">cursor: nw-resize</p> <p class="nwse-resize">cursor: nwse-resize</p> <p class="no-drop">cursor: no-drop</p> <p class="none">cursor: none</p> <p class="not-allowed">cursor: not-allowed</p> <p class="pointer">cursor: pointer</p> <p class="progress">cursor: progress</p> <p class="row-resize">cursor: row-resize</p> <p class="s-resize">cursor: s-resize</p> <p class="se-resize">cursor: se-resize</p> <p class="sw-resize">cursor: sw-resize</p> <p class="text">cursor: text</p> <p class="url">cursor: url</p> <p class="w-resize">cursor: w-resize</p> <p class="wait">cursor: wait</p> <p class="zoom-in">cursor: zoom-in</p> <p class="zoom-out">cursor: zoom-out</p> 

Source: CSS Cursor Property @ W3Schools

Answer 5

You can create your own cursors and set them as cursors using cursor: url('path-to-your-cursor'); or find Firefox and copy them (bonus: good consistent viewing in every browser).

Answer 6

I may be late, but you can try the following code that worked for me for Drag and Drop.

 .dndclass{ cursor: url('../images/grab1.png'), auto; } .dndclass:active { cursor: url('../images/grabbing1.png'), auto; } 

You can use the images below in the URL above. Make sure this is a transparent PNG image. If not, download it from Google.

Answer 7

Closed hand cursor is not 16x16. If you need them in the same sizes, you have both 16x16 pixels

Or if you need original cursors:

https://www.google.com/intl/en_ALL/mapfiles/openhand.cur https://www.google.com/intl/en_ALL/mapfiles/closedhand.cur