- Supported in Firefox
- Supported in Chrome
- Supported in Safari
- Part supported in IE
- Supported Opera
Microsoft first added Drag and Drop support to IE5 in 1999. Ian Hickson took this original implementation as the base for the HTML5 version. It’s not considered to be one of the most elegantly designed parts of the HTML5 specification, but it is functional and with the introduction of IE10 it will be supported by all the major browsers.
This demo shows one of the more complex features of drag and drop which allows a developer to attach data to a dragged object and collect that data when the object is dropped. In this case the HTML contact is turned into a vCard, which is displayed when the contact is dropped into the area below.
This demo should work with Chrome, Firefox, Safari and Opera, but not in IE9 or less. Try opening the demo in two browser windows and drag between them.
- Drag and drop contact above into this box
Object, method, and property compatibility
|Firefox 14.0.1||Chrome 22.0||Safari 6.0||IE 9.0||Opera 12.01|
|drag and drop event||Yes||Yes||Yes||Incomplete||Yes|
The documentation for IE 10 surggest that on release it will have full support for HTML5 Drag and Drop API
To make this demo work with IE9 or less the drag object would need to be a hyperlink and the data type would need to be
Text. In the code above note the use of
e.preventDefault() this is needed otherwise the user interaction will
fail. You need to add the
draggable=true attribute to the drag object tag. For some versions of Safari to work correctly
you also need to add the CSS rule below.