CSS do pobierania kursorów (przeciągnij i upuść)

Mam aplikację internetową JavaScript, w której użytkownik musi chwycić tło, aby przesunąć cały ekran. Dlatego chcę, aby kursor zmieniał się, gdy najeżdżają na tło. -moz-grabI -moz-grabbingkursory CSS są idealne do tego celu. Oczywiście działają tylko w przeglądarce Firefox ... czy istnieją równoważne kursory dla innych przeglądarek? Czy muszę zrobić coś bardziej niestandardowego niż standardowe kursory CSS?

Myślę, moveże prawdopodobnie byłaby to najbliższa standardowa wartość kursora dla tego, co robisz:

move
Wskazuje, że coś ma zostać przeniesione.

Na wypadek, gdyby ktoś inny natknął się na to pytanie, prawdopodobnie właśnie tego szukałeś:

.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 i grabbingteraz są dozwolone wartości cursor. Aby zapewnić kilka alternatywnych rozwiązań zapewniających zgodność z różnymi przeglądarkami 3, w tym niestandardowe pliki kursorów, kompletne rozwiązanie wyglądałoby tak:

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

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

„Bardziej niestandardowe” niż kursory CSS oznacza wtyczkę pewnego typu, ale możesz całkowicie określić własne kursory za pomocą CSS. Myślę, że ta lista ma to, czego chcesz:

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

Źródło: kursor CSS Property @ W3Schools

Możesz stworzyć własne kursory i ustawić je jako kursor za pomocą cursor: url('path-to-your-cursor');lub znaleźć Firefox i skopiować je (bonus: ładny, spójny wygląd w każdej przeglądarce).

Mogę się spóźnić, ale możesz wypróbować poniższy kod, który działał dla mnie w przypadku Drag and Drop.

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

}

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

Możesz użyć poniższych zdjęć w powyższym adresie URL. Upewnij się, że jest to przezroczysty obraz PNG. Jeśli nie, pobierz go z Google.

Kursor zamkniętej dłoni nie ma rozmiaru 16x16. Jeśli potrzebujesz ich w tych samych wymiarach, tutaj masz oba w 16x16 px

Lub jeśli potrzebujesz oryginalnych kursorów:

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