CSS để lấy con trỏ (kéo và thả)

Tôi có một ứng dụng web JavaScript nơi người dùng cần lấy nền để di chuyển toàn bộ màn hình. Vì vậy, tôi muốn con trỏ thay đổi khi chúng di chuột qua nền. Các con trỏ CSS -moz-grabvà -moz-grabbinglý tưởng cho việc này. Tất nhiên, chúng chỉ hoạt động trong Firefox ... có con trỏ tương đương cho các trình duyệt khác không? Tôi có phải làm một cái gì đó tùy chỉnh hơn một chút so với con trỏ CSS tiêu chuẩn không?

Tôi nghĩ movecó lẽ sẽ là giá trị con trỏ tiêu chuẩn gần nhất cho những gì bạn đang làm:

di chuyển
Chỉ ra một cái gì đó sẽ được di chuyển.

Trong trường hợp bất kỳ ai khác vấp phải câu hỏi này, đây có lẽ là điều bạn đang tìm kiếm:

.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 và grabbinghiện được phép cho các giá trị cursor. Để cung cấp một số dự phòng cho khả năng tương thích giữa nhiều trình duyệt 3 bao gồm các tệp con trỏ tùy chỉnh, một giải pháp hoàn chỉnh sẽ giống như sau:

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

Cập nhật 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;
}

"Nhiều tùy chỉnh" hơn các con trỏ CSS có nghĩa là một loại plugin, nhưng bạn hoàn toàn có thể chỉ định các con trỏ của riêng mình bằng CSS. Tôi nghĩ rằng danh sách này có những gì bạn muốn:

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

Nguồn: Thuộc tính con trỏ CSS @ W3Schools

Bạn có thể tạo các con trỏ của riêng mình và đặt chúng làm con trỏ bằng cách sử dụng cursor: url('path-to-your-cursor');hoặc tìm Firefox và sao chép chúng (phần thưởng: giao diện đẹp nhất quán trong mọi trình duyệt).

Tôi có thể bị trễ, nhưng bạn có thể thử đoạn mã sau, hoạt động với tôi cho Kéo và Thả.

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

}

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

Bạn có thể sử dụng các hình ảnh dưới đây trong URL ở trên. Hãy chắc chắn rằng đó là một hình ảnh trong suốt PNG. Nếu không, hãy tải xuống từ google.

Con trỏ tay đóng không phải là 16x16. Nếu bạn cần chúng ở cùng kích thước, thì ở đây bạn có cả hai kích thước 16x16 px

Hoặc nếu bạn cần con trỏ gốc:

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