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

170

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?

w.
źródło

Odpowiedzi:

106

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

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

mu jest za krótkie
źródło
1
Widziałem ikonę ruchu, pomyślałem, że ikona chwytania jest lepsza. Ale teraz, kiedy wskazałeś, w3c uważa, że ​​kursor „Wskazuje, że coś ma zostać przesunięte”, ma to największy sens. Dzięki.
godz.
2
@at: możesz określić wiele kursorów na liście rozdzielanej przecinkami, a agent użytkownika powinien użyć pierwszego, który zrozumie. Możesz więc użyć -moz * one i „move” jako rezerwy.
mu jest za krótkie
14
@muistooshort Czy na pewno lista przecinków nadal działa? Używam cursor:move; cursor:-webkit-grab; cursor:-moz-grab; cursor:grab;z najbardziej preferowanym ostatnim.
Bob Stein
2
@ BobStein-VisiBone: Myślę, że kilka lat temu mogło dojść do zamieszania. AFAIK lista przecinków działa, jeśli określasz wiele formatów, takich jak cursor: url(example.svg#linkcursor), url(hyper.cur), pointerzamiast wielu możliwych wartości. Myślę, że twoje podejście może być konieczne.
mu jest za krótkie
417

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;
}
J.Steve
źródło
44
z jakiegoś powodu „chwytanie” pojawia się tylko wtedy, gdy puszczam mysz. jakiś pomysł, dlaczego tak jest?
Jona
@Jona Domyślam się, że nie dodałeś grabbableklasy do żadnego elementu, który można złapać, a przełączasz klasę, gdy są przeciągane.
Emile Bergeron
1
ładna rozszerzona odpowiedź, dzięki za dodanie dodatkowego „chwytającego” kawałka. miły dotyk. :)
scotself
1
Dla każdego, kto miał problem z tym rozwiązaniem, musiałem ustawić grabkursor :hoverraczej na niż zwykły selektor, czyli .grabbable:hoverw powyższym przykładzie.
Markus Amalthea Magnuson
@Jona dodanie tych stylów do rodzica <ul>zamiast <li>w moim przypadku rozwiązało problem
Arthur Tarasov
52

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;
}
Volker E.
źródło
1
Twój post jest duplikatem artykułu J.Steve
9
@ user2230470 Różni się w dwóch ważnych punktach: Po pierwsze, zapewnia obraz kursora dla przeglądarek nie obsługujących grab, ale obrazy kursorów. Po drugie, najlepszą praktyką jest umieszczanie składni standardów po prefiksach dostawcy.
Volker E.
naprawdę?! dlaczego? gdzie mogę znaleźć więcej informacji na temat podobnych praktyk.
8
@ user2230470 - ponieważ w przypadkach, gdy przeglądarka obsługuje 2 zachowania, w których prefiks mógł zostać zaimplementowany nieco przed finalizacją standardowego (i dlatego może działać inaczej), chcesz, aby używał standardowego ... i jakakolwiek definicja przyjdzie OSTATNI to ten, którego będzie używać przeglądarka. Dlatego standard powinien być ostatni.
Jimbo Jonny
3
to images/grab.curprzykładowy adres URL obrazu, który muszę umieścić na serwerze sieciowym, czy może to jakaś magiczna rzecz w IE?
Jon z
11

„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

Winfield Trail
źródło
5

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

Ry-
źródło
5

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.

wprowadź opis obrazu tutaj wprowadź opis obrazu tutaj

Jeeva
źródło