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?

Mussman

@BrainSlugs: Really? Mine keeps happily selecting text and that's about it. Other examples mentioned below do work. – Dixie

Answer 1

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

Wil

posted a workaround to make containers other than links and images draggable in ie9 – Tandi

This turned out to be the problem. I used jQuery and created a working at example of DnD at... springfieldspringfield.co.uk/stuff/dnd/dnd.html – Mussman

@Mussman I expected something to happen if Homer eats all donuts – Chapter

FYI, this answer is close, but a more accurate description of the issue is as follows: the problem isn't that IE doesn't do drag-and-drop on div elements. The problem is that it doesn't do it correctly on display: block; elements. – Pelvis

Answer 2

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

Tandi

a more convenient solution is to do: $(container).bind('selectstart', function(){this.dragDrop(); return false;}); – Halidom

in Prototype: document.on("selectstart", "[draggable]", function(event, element) { event.stop(); element.dragDrop(); }); - one global event observer for all [draggable] elements – Eumenides

and what if you have multiple divs? how would you bind them all ? – Dafna

@IonutFlaviusPogacian: Please post a question or rephrase. If I understand you right, jQuery binds events to multiple elements by default, unless you use something like "eq(n)" to get a specific jQuery wrapped element and then bind. – Palomo

@Halidom deserves some points for his answer! Three years on, the modern (jQuery 1.11) equivalent is $(container).on('selectstart', function(){this.dragDrop(); return false;}); No further browser-specific code for dropping, dragend, etc. appears to be required. And it doesn't cause any additional problems for Chrome, Firefox and IE10+ which ignore the IE9-specific code. – Kunming

@Kunming It seems that dragDrop is undefined in Chrome and maybe other browsers. If wrap it in if (this.dragDrop) {} now. – Largent

Answer 3

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.

Bridie

Additionally, you can use modernizr to detect if HTML5 drag and drop is supported and have them skip this. Here is a link: #2856762 – Palomo

Answer 4

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.

Sowers

It works it just doesn't show the faded version of it getting dragged. But all events are firing. – Dipteran

Yes, html5demos.com/drag works fine in IE9 (speaking in July 2015). 9.0.8112.16421 to be precise. The trouble is, it's still just a bunch of links, which is the same as other IE9-compatible demos out there. – Kunming

Answer 5

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.

Geithner

Answer 6

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;
            }
        }
    });
}

Resinate

Answer 7

I would suggest using jQuery UI's draggable.

Carricarriage

Answer 8

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.

Sidle

Answer 9

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

Mortgagor