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 problem is with how I attached the events.

This here is where the events are attached for all browsers BUT IE:

function eventer(){
for (var i = 0, len = allPieces.length; i < len; i++){
        allPieces[i].addEventListener('dragstart', handlePieceDragStart, false);
}
for (var i = 0, len = allSquares.length; i < len; i++){
            allSquares[i].addEventListener('dragstart', handleDragStart, false);
            allSquares[i].addEventListener('dragenter', handleDragEnter, false);
            allSquares[i].addEventListener('dragover', allowDrop, false);
            allSquares[i].addEventListener('dragleave', handleDragLeave, false);
            allSquares[i].addEventListener('drop', handleDrop, false);  
    }
}

...and this is the attachments for IE:

function eventerIE(){
    for (var i = 0, len = allPieces.length; i < len; i++){
            allPieces[i].attachEvent('dragstart', handlePieceDragStart, false);
    }
    for (var i = 0, len = allSquares.length; i < len; i++){
                allSquares[i].attachEvent('dragstart', handleDragStart);
                allSquares[i].attachEvent('dragenter', handleDragEnter);
                allSquares[i].attachEvent('dragover', allowDrop);
                allSquares[i].attachEvent('dragleave', handleDragLeave);
                allSquares[i].attachEvent('drop', handleDrop);
    }
}

These are the functions that are called on event:

function handleDragStart(e){
    dragSrcEl = this;
    e.dataTransfer.effectAllowed = 'copy';
    e.dataTransfer.setData('text/html', this.innerHTML);

}
function handlePieceDragStart(e){
    dragPiece = this;
    e.dataTransfer.setData('id', dragPiece.id);
    dragPieceId = dragPiece.id;
}
function handleDragEnter(e){
    this.classList.add('over');

}
function allowDrop(e){
    e.preventDefault();
}; 
function handleDragLeave(e){
    this.classList.remove('over');
}
function handleDrop(e) {

  if (e.stopPropagation) {
    e.stopPropagation();
    e.preventDefault();
  }

  if (dragSrcEl != this) {
    dragSrcEl.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/html');
    pId = e.dataTransfer.getData('id');
    this.taken = dragPiece.id;
    sId = this.id;

  }
var sqrs = document.getElementsByTagName("td");
    [].forEach.call(sqrs, function (col){
        col.classList.remove('over');

    });
    for(var i=0, len = piecesPosition.length; i < len; i++){
            if (piecesPosition[i][0]==dragPiece.id){
            delete piecesPosition[i];       
            piecesPosition.push([dragPiece.id,sId]);
            piecesPosition = piecesPosition.filter(function(){return true});

        }

    }
    dragPiece = document.getElementById(dragPieceId);
    dragPiece.pstn = sId;
    this.classList.remove('over');

}

I hope the code gives a good idea as to what is happening there, if you have any questions about it I would love to comment and explain more.

Thanks ahead

EDIT: After Iv'e changed the events as @Chase suggested, The functions are being called upon event, and now I get an Invalid argument error for e.dataTransfer.setData('text/html', this.innerHTML); inside the function handleDragStart.

Again, that's only in IE9 and IE8 mode.

Solution 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".

Solution 2

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

Solution 3

setData method expect String data type not Number

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

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

Solution 4

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

View more solutions