0

Drag and drop in HTML5 uses the following cursor shape when an element is dragged over the drop zone:

enter image description here

Would it be possible to set cursor to above shape without using drag and drop?

cyrus-d
  • 749
  • 1
  • 12
  • 29
  • Does this answer your question? [CSS for grabbing cursors (drag & drop)](https://stackoverflow.com/questions/5697067/css-for-grabbing-cursors-drag-drop) – blurfus Dec 07 '22 at 20:40
  • Thanks for the response, the grabbing cursor shape isn't the same as the one above. – cyrus-d Dec 07 '22 at 20:56
  • it is not, but the mechanism for assigning a cursor _shape_ on `hover` is the same – blurfus Dec 07 '22 at 21:20

1 Answers1

2

According to MDN:

By default, the browser supplies an image that appears beside the pointer during a drag operation. However, an application may define a custom image with the setDragImage() method, as shown in the following example.

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API#define_the_drag_image

So in theory, you can do the same:

  1. Use the User-Agent to determine what's the most likely cursor design the user has (e.g. Chrome/Edge; Windows/Mac, etc)
  2. Provide the appropriate cursor as an image, e.g.: https://i.stack.imgur.com/zaRox.png

html, body {
  height: 100%;
}

body {
  cursor: url("https://i.stack.imgur.com/zaRox.png"), default;
}

... but obviously this isn't a very optimal approach. Unless it's urgent, wait for the cursor to hopefully be added natively.

Nora Söderlund
  • 1,148
  • 2
  • 18