CSS untuk meraih kursor (seret & lepas)


170

Saya memiliki webapp JavaScript di mana pengguna harus mengambil latar belakang untuk memindahkan seluruh layar. Jadi saya ingin kursor berubah ketika mereka melayang di atas latar belakang. The -moz-grabdan -moz-grabbingkursor CSS yang ideal untuk ini. Tentu saja, mereka hanya berfungsi di Firefox ... adakah kursor yang setara untuk browser lain? Apakah saya harus melakukan sesuatu yang sedikit lebih khusus daripada kursor CSS standar?

Jawaban:


106

Saya pikir movemungkin akan menjadi nilai kursor standar terdekat untuk apa yang Anda lakukan:

move
Menunjukkan ada sesuatu yang harus dipindahkan.


1
Saya melihat ikon bergerak, berpikir ikon ambil lebih baik. Tapi sekarang setelah Anda tunjukkan, w3c menganggap kursor "Menunjukkan sesuatu harus dipindahkan," itu yang paling masuk akal. Terima kasih.
di

2
@ at: Anda dapat menentukan beberapa kursor dalam daftar yang dibatasi koma dan agen pengguna harus menggunakan yang pertama yang dimengerti. Jadi, Anda dapat menggunakan -moz * yang dan "bergerak" sebagai mundur.
mu terlalu pendek

14
@muistooshort Anda yakin daftar koma masih berfungsi? Saya menggunakan cursor:move; cursor:-webkit-grab; cursor:-moz-grab; cursor:grab;dengan yang terakhir paling disukai.
Bob Stein

2
@ BobStein-VisiBone: Saya pikir mungkin ada beberapa kebingungan di sana beberapa tahun yang lalu. AFAIK daftar koma berfungsi jika Anda menentukan beberapa format seperti cursor: url(example.svg#linkcursor), url(hyper.cur), pointerdaripada beberapa nilai yang mungkin. Saya pikir pendekatan Anda mungkin diperlukan.
mu terlalu pendek

418

Jika ada orang yang menemukan pertanyaan ini, mungkin ini yang Anda cari:

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

44
untuk beberapa alasan 'meraih' hanya muncul ketika saya melepaskan mouse. ada yang tahu ini kenapa?
Jona

@ Jona tebakan saya adalah bahwa Anda tidak menambahkan grabbablekelas ke elemen apa pun yang bisa diambil, dan Anda beralih kelas ketika mereka sedang diseret.
Emile Bergeron

1
jawaban yang diperluas bagus, terima kasih telah menambahkan bit "menyambar" ekstra. sentuhan yang bagus. :)
scotself

1
Bagi siapa pun yang mengalami masalah dengan solusi ini, saya harus mengatur grabkursor :hoverdaripada pemilih biasa, yaitu .grabbable:hoverdalam contoh di atas.
Markus Amalthea Magnuson

@Jona menambahkan gaya ini ke orang tua <ul>alih-alih <li>dalam kasus saya menyelesaikan masalah
Arthur Tarasov

52

CSS3 grab dan grabbingsekarang diizinkan untuk nilai cursor. Untuk memberikan beberapa fallback untuk kompatibilitas lintas-browser 3 termasuk file kursor khusus, solusi lengkap akan terlihat seperti ini:

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

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

1
Posting Anda adalah duplikat dari J.Steve's

9
@ user2230470 Ini berbeda dalam dua poin penting: Pertama, ini menyediakan gambar kursor untuk browser tidak mendukung grab, tetapi gambar kursor. Kedua, praktik terbaik untuk memiliki sintaksis standar setelah nilai-nilai awalan vendor.
Volker E.

Betulkah?! bagaimana bisa? juga, di mana saya dapat menemukan info lebih lanjut tentang praktik standar yang mirip dengan itu.

8
@ user2230470 - karena dalam kasus di mana browser mendukung 2 perilaku di mana yang diawali mungkin telah diterapkan sedikit sebelum finalisasi yang standar (dan karena itu dapat bertindak berbeda) Anda ingin menggunakan yang standar ... dan definisi apa pun yang muncul LAST adalah browser yang akan digunakan. Oleh karena itu standar yang harusnya terakhir.
Jimbo Jonny

3
adalah images/grab.curcontoh URL untuk gambar yang perlu saya host di server web saya, atau apakah itu sesuatu yang ajaib IE?
Jon z

11

"lebih khusus" daripada kursor CSS berarti plugin dari beberapa jenis, tetapi Anda dapat benar-benar menentukan kursor Anda sendiri menggunakan CSS. Saya pikir daftar ini memiliki apa yang Anda inginkan:

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

Sumber: Properti kursor CSS @ W3Schools


5

Anda dapat membuat kursor Anda sendiri dan menetapkannya sebagai kursor menggunakan cursor: url('path-to-your-cursor');, atau menemukan Firefox dan menyalinnya (bonus: tampilan konsisten yang bagus di setiap browser).


5

Saya mungkin terlambat, tetapi Anda dapat mencoba kode berikut, yang berfungsi untuk saya untuk Seret dan Jatuhkan.

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

}

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

Anda dapat menggunakan gambar di bawah ini di URL di atas. Pastikan itu adalah gambar transparan PNG. Jika tidak, unduh satu dari google.

masukkan deskripsi gambar di sini masukkan deskripsi gambar di sini


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.