Feature Detection for setDragImage HTML5 Drag and Drop

Question

Is there a way to do function detection for setDragImage HTML5 Drag and Drop (in JavaScript or Dart)?

I am doing a general HTML5 drag and drop detection as follows (from the detection guide for everything ):

return 'draggable' in document.createElement('span'); 

This will return true for Chrome, Firefox, etc. and IE10. It will return false for IE9.

Now the problem is IE10 . Although it supports most of HTML5 drag and drop, setDragImage not supported, and I need to provide a polyfill only for setDragImage . But I could not figure out how to detect this.

Answer 1

Function detection, mentioned in the previous answer, does not work in Opera 12 - because it requires support for setDragImage, it just does not work. The Dart libraries that were linked also do not fully work in Opera 12, throwing a few errors to the console.

It is actually impossible to polyfill a ghost image - even if you create a document element and place it in the right place, you cannot get rid of the standard one without setDragImage.

The only solution I know of is to filter out Opera 12 and all versions of IE (up to IE11 and including IE11) and treat them as legacy browsers that should be served by traditional mouse event scripts. Since direct function testing fails, I would recommend an indirect object test (for example, use the object test to detect these specific browsers):

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

Answer 2

This solution assumes that general D&D support has already been tested.

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 have not found a way to do this with the "native" Dart code, so js-interop is the way to go.

Answer 3

You can use setDragImage-IE polyfill:

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

Here's how it works (from README):

I noticed that if you make changes to the style of an element (adding a class that changes appearance) inside the dragstart and then immediately deleting it in setTimeout , Internet Explorer will make a raster copy of the modified element and use it to drag and drop. So what this library does in fact is to implement the setDragImage method, which changes the style of the target element, adding a class that includes the image that you want to display when dragging and dropping it. In this way, the browser renders the temporary style element as a drag and drop image.