Drag and drop

  • 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.

Madgex

30-31 North Street Brighton East Sussex United Kingdom BN1

  • 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
dataTransfer Yes Yes Yes Yes Yes
dataTransfer.types Yes Yes Yes No Yes
dataTransfer.getData Yes Yes Yes Incomplete Yes
dataTransfer.setData Yes Yes Yes Incomplete Yes
mime types Yes Yes Yes No Yes
custom types Yes Yes Yes No Yes

The documentation for IE 10 surggest that on release it will have full support for HTML5 Drag and Drop API

Notes

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 passed as 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.

Useful Links