- 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
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
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.
Object, method, and property compatibility
|Firefox 15.0.1||Chrome 24.0||Safari 6.0||IE 9.0||Opera 12|
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.