İmleçler için CSS (sürükle ve bırak)

Kullanıcının tüm ekranı hareket ettirmek için arka planı tutması gereken bir JavaScript web uygulamam var. Bu yüzden imlecin arka planın üzerine geldiklerinde değişmesini istiyorum. -moz-grabVe -moz-grabbingCSS imleçleri bunun için idealdir. Tabii ki, sadece Firefox'ta çalışıyorlar ... diğer tarayıcılar için eşdeğer imleçler var mı? Standart CSS imleçlerinden biraz daha özel bir şey yapmam gerekiyor mu?

moveMuhtemelen yaptığınız şey için en yakın standart imleç değeri olacağını düşünüyorum :

hareket Bir
şeyin taşınacağını gösterir.

Başka birinin bu soruya rastlaması durumunda, muhtemelen aradığınız şey budur:

.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 ve grabbingartık için izin verilen değerler cursor. Özel imleç dosyaları dahil olmak üzere tarayıcılar arası uyumluluk 3 için çeşitli yedekler sağlamak için eksiksiz bir çözüm şöyle görünecektir:

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

Güncelleme 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;
}

CSS imleçlerinden "daha özel" bir tür eklenti anlamına gelir, ancak CSS kullanarak tamamen kendi imleçlerinizi belirtebilirsiniz. Bence bu listede istediğiniz şey var:

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

Kaynak: CSS imleci Property @ W3Schools

Kendi imleçlerinizi oluşturabilir ve bunları kullanarak imleç olarak ayarlayabilir cursor: url('path-to-your-cursor');veya Firefox'ları bulup kopyalayabilirsiniz (bonus: her tarayıcıda hoş ve tutarlı bir görünüm).

Geç kalabilirim, ancak Sürükle ve Bırak için benim için çalışan aşağıdaki kodu deneyebilirsiniz.

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

}

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

Aşağıdaki resimleri yukarıdaki URL'de kullanabilirsiniz. PNG şeffaf bir görüntü olduğundan emin olun. Değilse, google'dan bir tane indirin.

Kapalı el imleci 16x16 değil. Aynı boyutlarda onlara ihtiyacınız varsa, burada her ikisine de 16x16 piksel boyutunda sahip olursunuz

Veya orijinal imleçlere ihtiyacınız varsa:

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