Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

drag and drop not working in IE - Javascript, HTML5

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.

like image 648
Tomcatom Avatar asked Oct 09 '12 15:10

Tomcatom


People also ask

Does HTML5 support drag-and-drop?

Complete HTML/CSS Course 2022 Now HTML 5 came up with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up. HTML 5 DnD is supported by all the major browsers like Chrome, Firefox 3.5 and Safari 4 etc.

How do I enable drag-and-drop in Internet Explorer?

Set the policy value for Computer Configuration -> Administrative Templates -> Windows Components -> Internet Explorer -> Internet Control Panel -> Security Page -> Restricted Sites Zone -> 'Allow drag and drop or copy and paste files' to 'Enabled', and select 'Disable' from the drop-down box.

How drag-and-drop works in JavaScript?

The HTML Drag and Drop API relies on the DOM's event model to get information on what is being dragged or dropped and to update that element on drag or drop. With JavaScript event handlers, you can turn any element into a draggable item or an item that can be dropped into.

How do you set dragged data in HTML5?

setData() The DataTransfer. setData() method sets the drag operation's drag data to the specified data and type. If data for the given type does not exist, it is added at the end of the drag data store, such that the last item in the types list will be the new type.


2 Answers

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

like image 199
Chris Herring Avatar answered Sep 17 '22 19:09

Chris Herring


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(); 
    } 
    ... 
}
like image 22
David Avatar answered Sep 19 '22 19:09

David