setDragImage support for Internet Explorer 10+ Drag & Drop
If you plan to use HTML5 Drag & Drop in your app, you will find out the hard way that Internet Explorer does not support the
setDragImage method, which on Firefox / Chrome shows an arbitrary image next to the cursor while dragging.
This polyfill provides the same functionality for Internet Explorer. It is less than 800 bytes compressed and gziped.
Why should you use it?
Generally the missing support for a drag image does not cause issues. However, there are cases when you want to give real feedback to the user related to what they are actually dragging. Let's say that if they drag one item, you should show an icon of a file, and when they drag multiple items you should show an icon of multiple files (and eventually a number). As Internet Explorer just shows as the drag element the element that is currently being dragged, the visual feedback can be confusing.
Check the demos in the
How to use it?
setdragimage-ie.jsin your project
- outside the
dragstartevent, (preferably when your application loads), call
setDragImageIEPreload(img)to preload the image which you will later use.
- Preloading ensures the image will be ready to be used when the first drag will happen
imgis a HTML image (either an image element or a Image object)
- inside the
dragstartevent, just use
ev.dataTransfer.setDragImage(img, x, y)as you'd do it for Chrome / Firefox
- start dragging and you'll also get the drag image on Internet Explorer as well
How does this actually work?
I noticed that if you make a change to the element's style (adding a class that changes appearance) inside the
dragstart event and then removing it immediately in a
setTimeout, Internet Explorer will make a bitmap copy of the modified element and will use it for dragging.
So, what this library actually does is implement the
setDragImage method that changes the target's element style by adding a class that includes the image that you want to appear while dragging, and then removes it. In this way, the browser displays the temporary style of the element as the drag image.
Due to the technical details described above, this polyfill has the following limitations / issues:
- there will be a very slight flicker when the drag will start
- you cannot specify the mouse offsets (the second and third parameter for
- the reason is that when IE makes the bitmap copy, he does not understand transparency and uses white. Any attempt to position the background image will result in a lot of white near the image, creating a very ugly effect
- the code is not in strict mode
- the reason is that
setDragImageis ran on the
DataTransferproperty of the event, so inside it the
thisis not the element or the event. To overcome this, I've used
callerso I walk through the functions that called
setDragImageand when I meet one that has the first parameter of type
dragstartevent), I get it and then get it's target. Another idea would have been to add the fourth parameter so you can send the element directly, but it is not feasible, since new methods may be added on
setDragImagein the future and it is not forward-compatible.
- the reason is that