Internet Explorer 9 Drag and Drop (DnD)

Question

Does anyone know why the following web site drag and drop examples (plus many other tutorials online) don't work in Internet Explorer 9? Chrome, FireFox and Safari are all OK.

http://www.html5rocks.com/tutorials/dnd/basics/

I thought IE9 was suppose to be the most HTML5 compliant browser? Especially with DnD since they have been supporting it since IE5. Do I have to change a setting somewhere?

The more I play with HTML5 and CSS3...the more IE9 lacks.

Does anyone have any links to DnD tutorials that work in IE9?

Answer 1

I've found a workarround to make the native dnd api also work in IE with elements other than links and images. Add a onmousemove handler to the draggable container and call the native IE function element.dragDrop(), when the button is pressed:

function handleDragMouseMove(e) {
    var target = e.target;
    if (window.event.button === 1) {
        target.dragDrop();
    }
}

var container = document.getElementById('widget');
if (container.dragDrop) {
    $(container).bind('mousemove', handleDragMouseMove);
}

// todo: add dragstart, dragover,... event handlers