Internet Explorer 9 Drag and Drop (DnD)

Does anyone know why the following web site drag and drop examples (plus many other tutori开发者_如何学运维als 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?

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

Well i have encountered this same weird behaviour in IE9, it appears to be that IE9 wont do a Drag and Drop (HTML 5 style) on div's. if you would change the div for a A with href="#" you will be able to drag and drop.

this won't drag:

<div data-value="1" class="loadedmodule-container" draggable="true">drag</div>

and this will:

<a href="#" data-value="1" class="loadedmodule-container" draggable="true">drag</a>

Hope this helps anyone

I've encountered the same problem. This trick works for me:

node.addEventListener('selectstart', function(evt) {
    this.dragDrop();
    return false;
}, false);

It stops the selection and starts the dragging.

This DnD example is working in IE9.

I think the example from HTML5Rocks is not working in IE9 because of CSS3 features. The example used several CSS3 features but IE9's CSS3 support is not good.

Furthermore, some of JS events and methods are not working in IE. For example setDragImage() is not working even in IE9. This is also one of the reason.

I've been looking at this too, I've found that Opera 11.50 has the same basic issue; both it and IE9 do not understand the HTML5 draggable attribute, nor the HTML5 drag-and-drop events.

As a workaround, I did find this opera article at http://dev.opera.com/articles/view/accessible-drag-and-drop/ that emulates drag-and-drop support with mousedown, mouseover, mousemove, mouseout, and mouseup events. Naturally, this is a lot of work, but it does give you dnd support in Opera.

You can see a live demo at http://devfiles.myopera.com/articles/735/example.html

The same dnd emulation trick works with IE9, and appears compatible with other HTML5 browsers.

This works for me. It makes IE9 behave like other modern browsers as far as drag/drop:

if (document.doctype && navigator.appVersion.indexOf("MSIE 9") > -1) {
    document.addEventListener('selectstart', function (e) {
        for (var el = e.target; el; el = el.parentNode) {
            if (el.attributes && el.attributes['draggable']) {
                e.preventDefault();
                e.stopImmediatePropagation();
                el.dragDrop();
                return false;
            }
        }
    });
}

I am having the same problem as Didier Caron above. Draggable divs don't work, but anchor tags work fine. I found a solution at HTML5 Doctor.

I would suggest using jQuery UI's draggable.

use element that have the draggable property set to true by default. they the and it should work Cheers