Make the cursor look like HTML5 drag and drop cursor-CodePudding

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

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

CodePudding user response：

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:

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

html, body {
  height: 100%;
}

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

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