HTML5 拖放在 IE11 上不起作用

Posted 2023-05-08

【中文标题】HTML5 拖放在 IE11 上不起作用

【英文标题】：HTML5 drag and drop not working on IE11

【发布时间】：2013-08-06 14:43:12

【问题描述】：

应用了 html5 原生拖放，drop 不适用于 IE，适用于 chrome 和 firefox。

拖动似乎正在工作，但在 IE 上没有发生拖放。

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

这是放置区域：

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

我删除了一些打印代码以使代码更短。

【参考方案1】：

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 嗅探的解决方案。

【讨论】：

你可以把它扔进try/catch。这有点像说“只有在前面的代码崩溃时才尝试这个。”

感谢 IE 的“文本”提示。它实际上在 FF 中工作没有问题，所以只需切换所有 setData/getData 函数调用以使用“文本”作为格式，对我有用。

+1，谢谢！我将您的方法与this SO answer 结合起来检测IE。

【参考方案2】：

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

我个人建议使用Text。它可能已经过时了，但这就是它可以正常工作的原因，即使可以追溯到 IE5，如果有记忆的话，对事件处理进行一些小的调整。

【参考方案3】：

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

【参考方案4】：

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