How To Change Icon During Dragover/dragenter HTML 5 Drag And Drop

How to change DnD's (drag and drop) icon during dragover or dragenter? Is it even possible? I am able to change the icon during dragstart if the source of the drop is inside the ht

Solution 1:

As per the specification, you cannot use setDragImage on events other than drag start. See here: https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransfer-setdragimage

The setDragImage(element, x, y) method must run the following steps:

1. If the DataTransfer object is no longer associated with a drag data store, return. Nothing happens.

2. If the drag data store's mode is not the read/write mode, return. Nothing happens.

3. If element is an img element, then set the drag data store bitmap to the element's image (at its intrinsic size); otherwise, set the drag data store bitmap to an image generated from the given element (the exact mechanism for doing so is not currently specified).

4. Set the drag data store hot spot coordinate to the given x, y coordinate.

And here, you can see that the drag data store is in read/write mode only on dragstart: https://html.spec.whatwg.org/multipage/dnd.html#concept-dnd-rw

Read/write mode For the dragstart event. New data can be added to the drag data store.

These are modes are there for security reasons, there are things you can do on the different stages of a drag and drop.