wake-up-neo.net

CSS zum Anfassen von Cursors (Drag & Drop)

Ich habe eine JavaScript-Web-App, bei der der Benutzer den Hintergrund packen muss, um den gesamten Bildschirm zu verschieben. Ich möchte, dass sich der Cursor ändert, wenn er über dem Hintergrund steht. Die CSS-Cursor -moz-grab und -moz-grabbing sind dafür ideal. Natürlich funktionieren sie nur in Firefox ... Gibt es gleichwertige Cursor für andere Browser? Muss ich etwas mehr benutzerdefiniert als Standard-CSS-Cursor tun?

130
at.

Ich denke, move wäre wahrscheinlich der nächstliegende Standardcursorwert für das, was Sie tun:

Bewegung
Gibt an, dass etwas verschoben werden soll.

79
mu is too short

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;
}
340
J.Steve

CSS3grab und grabbing sind jetzt zulässige Werte für cursor. Um mehrere Fallbacks für Cross-Browser-Kompatibilität einschließlich benutzerdefinierter Cursordateien 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;
}
37
Volker E.

"Mehr benutzerdefiniert" als CSS-Cursor bedeutet ein Plugin eines bestimmten Typs, aber Sie können Ihre eigenen Cursor vollständig mit CSS 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

10
Winfield Trail

Sie können Ihre eigenen Cursor erstellen und mit cursor: url('path-to-your-cursor'); als Cursor festlegen oder die von Firefox finden und kopieren (Bonus: Ein konsistenter Look in jedem Browser).

5
Ry-

Ich komme zwar zu spät, aber Sie können den folgenden Code ausprobieren, der für Drag & Drop für mich 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 PNG-transparentes Bild handelt. Wenn nicht, laden Sie eine von Google herunter.

 enter image description here  enter image description here

3
Jeeva

Der geschlossene Handcursor ist nicht 16x16. Wenn Sie sie in den gleichen Abmessungen benötigen, haben Sie beide in 16x16 px

 opened hand  closed hand

Oder wenn Sie originale Cursor benötigen:

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

0
Zenon