HTML5 drag and drop not working on IE11

Question

Got HTML5 native drag and drop applied, drop is no working with IE, working well with chrome and firefox.

the dragging appears to be working but drop isnt happaning on IE.

another small question - in IE i got a half transparent square around my draggable element, but its background is transparent(the image is done like that), and on chrome/firefox i dont have that square and the image look without any background while dragging.

this is the drop area:

<div id="4x2" class="dropArea" draggable="false" ondragenter="drag_enter(event); return false;" ondrop="drag_drop(event); return false;" ondragover="return false" ondragleave="drag_leave(event); return false;" data-droppable="true" onmouseover="return mouseOver(this); return false;" onclick="return movePlayer(this); return false;" onmouseout="return mouseOut(this); return false;">
</div>

this is the draggable element:

<div id="player1" draggable="true" ondragstart="drag_start(event); return false;" ondragend="drag_end(event); return false;" data-droppable="false" onclick="return selectPlayer(this); return false;" data-selectable="true"></div>

function drag_start(e) 
    {
        e.dataTransfer.effectallowed = 'copy';
        e.dataTransfer.dropEffect = 'copy';
        e.dataTransfer.setData("text/plain", e.target.getAttribute('id'));
    }

function drag_enter(e) {

        if (e.target.getAttribute('data-droppable') == 'true') {
            e.target.style.backgroundImage = "url(images/board_cell_background_highlight.png)";
        }

function drag_leave(e) {

        if (e.target.getAttribute('data-droppable') == 'true') {
            e.target.style.backgroundImage = "url(images/board_cell_background.png)";
        }


function drag_drop(e) {
        var element = e.dataTransfer.getData("Text"); // the player
        if (e.preventDefault) {
            e.preventDefault();
        }
        if (e.stopPropagation) {
            e.stopPropagation();
        }
        if (e.target.getAttribute('id') == "player1" || e.target.getAttribute('id') == "player2") {
            alert("invalid Move");
            return false;
        }

        e.target.style.backgroundImage = "url(images/board_cell_background.png)";
        moveHandler(element, e.target.getAttribute('id'));
    }

function drag_end(e) {
        e.dataTransfer.effectallowed = 'copy';
        alert("drop end")
        }
    }
}

I remove some code of printing stuff to make the code more shorter.

Answer 1

IE10/11 uses Text as the data string and it breaks if you use text/plain. If you use Text, it breaks in Firefox.

I get around this by doing something like this in whatever drag and drop functions I need to write:

var setDataString = 'text/html';
// We need to change the setDataString type for IE since IE doesn't support setData and getData correctly. 
this.changeDataStringForIe = (function() {
    var userAgent = window.navigator.userAgent,
    msie = userAgent.indexOf('MSIE '),       //Detect IE
    trident = userAgent.indexOf('Trident/'); //Detect IE 11

    if (msie > 0 || trident > 0) {
        setDataString = 'Text';
        return true;
    } else {
        return false;
     }
})();

I'd love to know of a solution that doesn't use userAgent sniffing.

Answer 2

You are setting data of type text/plain, but retrieving data of type Text. While some browsers might understand them to be one and the same, others may not. In this case, it seems Internet Explorer is being pedantic while Chrome and Firefox are being lax.

Personally, I'd suggest using Text. It might be old, but that's what would make it work fine, even as far back as IE5, if memory serves, given some small adjustments to the event handling.