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.

alexbooots · Answer 1 · 2014-10-16T05:13:39.600

5

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.

edited Oct 16 '14 at 05:13

answered Oct 15 '14 at 22:19

alexbooots

383
6
22

1

You _could_ throw it in a `try/catch`. That's a little bit more like saying "only try this if the preceding code blew up." – Cho Naseo Dec 22 '14 at 19:02
Thanks for the "Text" hint for IE. It does in fact work in FF with no problem, so simply switching all setData/getData function calls to use "Text" as format, worked for me. – ak93 May 22 '18 at 07:47
1

+1 and thank you! I combined your approach with [this SO answer](https://stackoverflow.com/a/21712356/1001100) to detect IE. – JamesQMurphy Aug 01 '20 at 05:12

score 3 · Answer 2 · answered Oct 23 '13 at 22:28

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.

score 3 · Answer 3 · answered Dec 25 '13 at 17:37

3

If someone does not drag and drop in IE 8.1 W at 11 just in the Internet Options Security tab and remove the check mark box protected mode or run IE as administrator

answered Dec 25 '13 at 17:37

score 0 · Answer 4 · answered Nov 17 '13 at 23:20

0

The problem is the browser defaults to pan actions rather than touch actions...look at http://msdn.microsoft.com/en-us/library/ie/dn265022(v=vs.85).aspx for information on how to control default action in css.

answered Nov 17 '13 at 23:20

DaddioNTS

55
5

HTML5 drag and drop not working on IE11

4 Answers4

Linked