HTML5拖放不能在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

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.

Answer 2

如果有人在Internet选项安全性选项卡中没有在IE 8.1 W中拖放11并删除复选框保护模式或以管理员身份运行IE

Answer 3

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 4

问题是浏览器默认为平移操作而不是触摸操作...请参阅http://msdn.microsoft.com/en-us/library/ie/dn265022(v=vs.85).aspx以获取有关如何操作的信息控制css中的默认操作。