Drag and drop Outlook contacts

  • Supported in Firefox
  • Supported in Chrome
  • Supported in Safari
  • Supported in IE
  • Supported in Opera

This is a demo of how you can use a contentEditable area in the older versions of IE to provide an upgraded drag and drop experience. Premasagar Rose emailed me a few days ago and asked if it is possible to drag contacts from Outlook into IE9 and extract the email addresses.

At first this seemed impossible as IE will only start supporting the newer HTML5 drag and drop API in version 10. The solution came when I realised that Outlook is a bit lazy and only provides drag data in text/plain mimetype format. Then I remembered the experiments I did with contentEditable area which accepts text and fires an ondrop event. So with a bit of work it is possible to create a cross-browser experience where a user can drag contacts out of Outlook and drop them into a browser. The code below swaps in a contentEditable area for IE9 and it retrieves the text using innerText or textContent when an ondrop event fires.

Give it a try... You can actually drag any text from another app containing emails onto the area below.

Drag and drop contacts from Outlook into this box

    Object, method, and property compatibility

      Firefox 15.0.1 Chrome 24.0 Safari 6.0 IE 9.0 Opera 12
    HTML5 DnD Yes Yes Yes No Yes
    contentEditable ondrop Yes Yes Yes Yes Yes

    Notes

    Notes. Adding the contentEditable property to an element that has an attached ondragleave event seems to cause draw problems in IE9. The code above has a function for object/property detection of both HTML5 DnD interface and the earlier Microsoft version. The example should use the HTML5 API before the fix for older IE versions, so IE10 will upgrade to the HTML5 option.

    Useful Links