HTML5 Drag&Drop issue in Internet Explorer (dataTr

Question

I'm trying to implement basic drag&drop functionality with HTML5. It works totally fine in Chrome, but in IE10 I get an 0x8000ffff - JavaScript runtime error: Unexpected call to method or property access. error in the line setData.

function handleDragStart(e) {
    e.dataTransfer.effectAllowed = 'move';                                        
    e.dataTransfer.setData("dropTarget", g.destination);
}

var cols = $("#" + g.source + " tbody > tr");
[].forEach.call(cols, function (col) {
    col.addEventListener('dragstart', handleDragStart, false);
});

What am I doing wrong?

Answer 1

You are right. In IE 11 I changed from e.dataTransfer.getData('text/html') to e.dataTransfer.getData('text') and no Errors occur. Dto. in e.dataTransfer.setData('text').

This sample (the DnD methods) will then run in IE 11, Chrome and Firefox: http://www.developer.com/lang/using-html5-drag-and-drop-in-asp.net.html

Answer 2

For those who are looking for an answer:

getData() and setData() attribute must be called exactly "text", since u can use any parameter in other browsers (which actualy makes lot of sense - IE rocks again), those other answers here are useless.

Answer 3

Looks like I misunderstood the purpose of dataTransfer.setData.

It works only like this:

e.dataTransfer.setData("Text", g.destination);