Search code examples
htmlcssdrag-and-dropmouse-cursor

Make the cursor look like HTML5 drag and drop cursor

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?

Solution

  • 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.sstatic.net/zaRox.png

    html, body {
  height: 100%;
}

body {
  cursor: url("https://i.sstatic.net/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.