HTML5 Drag&Drop issue in Internet Explorer (dataTransfer property access not possible)

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?

Solution 1

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.

Solution 2

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

Solution 3

Looks like I misunderstood the purpose of dataTransfer.setData.

It works only like this:

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

Comments

[user10089632]

Possible duplicate of drag and drop not working in IE - Javascript, HTML5

[Srneczek]

how is this different from code in your question?? So the parameter must be called exactly "text" / "Text"?? What about to mention that?

[BradGreens]

@netik this answer should be marked as correct. And thanks @user1096907!

[GM-Script-Writer-62850]

After spending an hour or more trying to figure out why I could not drop in IE11 I figured out you can't drop onto a inline styled element; w3schools.com/code/tryit.asp?filename=FCO7068754RJ

[atheaos]

The value should actually be exactly "Text". If you give "text", IE will still write "Text" to the dataTransfer.types object. If you then try to check it for "text" on drop (dataTransfer.types.contains("text")) it will fail.

[Srneczek]

@atheaos it is looong time so I don't remember but maybe it depends on a IE version? Since I know myself and I would write "Text" if it was the correct string. I cannot test it, hell I dont even have IE anywhere installed for obvious reasons :)

[Fear605]

Just spent an hour on this. GRR.

[muz the axe]

Doesn't really make any sense. If the parameter only has one value that is valid for IE, why does IE even have the parameter? Even better, why don't they ignore the parameter and just use "Text" when and where they want?