HTML5拖放在IE11上不起作用

HTML5 drag and drop not working on IE11

本文关键字：不起作用 IE11 拖放 HTML5      更新时间：2023-09-26

应用了HTML5原生拖放，drop不适用于IE，可以很好地使用chrome和firefox。

拖动似乎起作用，但IE上没有拖放。

另一个小问题-在IE中，我在我的可拖动元素周围有一个半透明的正方形，但它的背景是透明的（图像是这样做的），而在chrome/ffirefox上，我没有这个正方形，拖动时图像看起来没有任何背景。

这是投放区域：

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

这是可拖动的元素：

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

我删除了一些打印内容的代码，使代码更短。

IE10/11使用Text作为数据字符串，如果使用Text/plain，则会中断。如果你使用文本，它会在Firefox中中断。

我通过在我需要写的任何拖放函数中做这样的事情来解决这个问题：

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

我很想知道一个不使用userAgent嗅探的解决方案。

您正在设置text/plain类型的数据，但正在检索Text类型的数据。虽然一些浏览器可能会将它们理解为一体，但其他浏览器可能不会。在这种情况下，Internet Explorer似乎是迂腐的，而Chrome和Firefox则是松懈的。

就我个人而言，我建议使用Text。它可能很旧，但这就是它工作良好的原因，即使早在IE5，如果内存可用的话，只要对事件处理进行一些小的调整。

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

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

相关文章：