drag and drop not working in IE - Javascript, HTML5

Question

I\'ve built this checker-board app which uses HTML5\'s Drag&Drop with javascript. It works great on chrome and firefox, but not on IE9 or IE8. My guess is that the probl

Answer 1

Use "text" instead of "text/html"

e.dataTransfer.setData("text", this.innerHTML);

See this article for explanation

Even though Internet Explorer started out by introducing only "text" and "URL" as valid data types, HTML5 extends this to allow any MIME type to be specified. The values "text" and "URL" will be supported by HTML5 for backwards compatibility, but they are mapped to "text/plain" and "text/uri-list".

Answer 2

IE is a bit different than most, try ondragstart, ondragenter, etc..

            allSquares[i].attachEvent('ondragstart', handleDragStart);
            allSquares[i].attachEvent('ondragenter', handleDragEnter);
            allSquares[i].attachEvent('ondragover', allowDrop);
            allSquares[i].attachEvent('ondragleave', handleDragLeave);
            allSquares[i].attachEvent('ondrop', handleDrop);

EDIT:

function handleDragStart(e){
    if(!e)
       e = window.event;

    dragSrcEl = (window.event) ? window.event.srcElement /* for IE */ : event.target;
    e.dataTransfer.effectAllowed = 'copy';
    e.dataTransfer.setData('text/html', dragSrcEl.innerHTML);
}

Answer 3

setData method expect String data type not Number

setData('text',1)//is wrong

setData('text',''+1)//is correct

Answer 4

You need to do two things for the drag and drop to work in I.E..

1) When you set and get the data use 'text' and not 'text/html'

e.dataTransfer.setData('text', this.innerHTML);

e.dataTransfer.getData('text');

2) Prevent the default behaviour when handling 'dragenter' (as well as 'dragover').

function handleDragEnter(e) {
    if (e.preventDefault) { 
        e.preventDefault(); 
    } 
    ... 
}