CSS zum Ergreifen von Cursorn (Drag & Drop)

Ich habe eine JavaScript-Webanwendung, in der der Benutzer den Hintergrund erfassen muss, um den gesamten Bildschirm zu verschieben. Ich möchte also, dass sich der Cursor ändert, wenn er über dem Hintergrund schwebt. Die -moz-grabund -moz-grabbingCSS-Cursor sind dafür ideal. Natürlich funktionieren sie nur in Firefox ... gibt es gleichwertige Cursor für andere Browser? Muss ich etwas Benutzerdefinierteres als Standard-CSS-Cursor tun?

Ich denke, dies movewäre wahrscheinlich der nächstgelegene Standardcursorwert für das, was Sie tun:

Verschieben
Zeigt an, dass etwas verschoben werden soll.

Falls jemand anderes über diese Frage stolpert, ist dies wahrscheinlich das, wonach Sie gesucht haben:

.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;
}

CSS3 grab und grabbingsind jetzt zulässige Werte für cursor. Um mehrere Fallbacks für die Cross-Browser-Kompatibilität 3 einschließlich benutzerdefinierter Cursor-Dateien bereitzustellen , würde eine vollständige Lösung folgendermaßen aussehen:

.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;
}

"Benutzerdefinierter" als CSS-Cursor bedeutet ein Plugin eines bestimmten Typs, aber Sie können Ihre eigenen Cursor mithilfe von CSS vollständig angeben. Ich denke, diese Liste hat was Sie wollen:

.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>

Quelle: CSS-Cursor Property @ W3Schools

Sie können Ihre eigenen Cursor erstellen und diese als Cursor festlegen cursor: url('path-to-your-cursor');oder Firefoxs finden und kopieren (Bonus: ein schönes, konsistentes Aussehen in jedem Browser).

Ich kann zu spät kommen, aber Sie können den folgenden Code ausprobieren, der für mich für Drag & Drop funktioniert hat.

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

}

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

Sie können die Bilder unten in der URL oben verwenden. Stellen Sie sicher, dass es sich um ein transparentes PNG-Bild handelt. Wenn nicht, laden Sie eine von Google herunter.

Der Cursor für die geschlossene Hand ist nicht 16x16. Wenn Sie sie in den gleichen Abmessungen benötigen würden, haben Sie hier beide in 16x16 px

Oder wenn Sie Originalcursor benötigen:

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