Feature Detection for setDragImage of HTML5 Drag and Drop

This solution assumes general D&D support has already been checked.

JavaScript (tested in IE, Firefox, Opera and Chrome):

function test() {    var testVar = window.DataTransfer || window.Clipboard;  // Clipboard is for Chrome    if("setDragImage" in testVar.prototype) {        window.alert("supported");    } else {        window.alert("not supported");    }}

Dart:

I didn't find a way to do this with "native" Dart code, so js-interop is the way to go.

You can use the setDragImage-IE polyfill:

https://github.com/MihaiValentin/setDragImage-IE

This is how it actually works (from the README):

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.

The feature detection mentioned in the previous answer fails in Opera 12 -- because it claims support for setDragImage, it just doesn't work. The Dart libraries that have been linked to also fail entirely in Opera 12, throwing multiple errors to the console.

It's actually not possible to polyfill a ghost image -- even if you create a document element and position it in the right place, you can't get rid of the default one without setDragImage.

The only solution I know of is to filter-out Opera 12 and all versions of IE (up to and including IE11) and treat them as legacy browsers, which have to be catered for with traditional mouse-event scripting. Since the direct feature testing fails, I would recommend an indirect object test (i.e. use an object test to detect those specific browsers):

var hasNativeDraggable = (element.draggable && !(document.uniqueID || window.opera));