HTML5拖放不能在IE11上運行

Question

得到了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")
        }
    }
}

我刪除了一些打印代碼，以使代碼更短。

Answer 1

您正在設置text/plain類型的數據，但檢索Text類型的數據。 雖然有些瀏覽器可能會理解它們是同一個，但其他瀏覽器可能不會。 在這種情況下，似乎Internet Explorer正在迂腐，而Chrome和Firefox則不嚴格。

就個人而言，我建議使用Text 。 這可能是舊的，但是如果內存服務的話，即使早在IE5上也可以使它工作正常，只要對事件處理進行一些小的調整。

Answer 2

如果有人在Internet選項安全性選項卡中沒有在IE 8.1 W中拖放11並刪除復選框保護模式或以管理員身份運行IE

Answer 3

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

Answer 4

問題是瀏覽器默認為平移操作而不是觸摸操作...請參閱http://msdn.microsoft.com/en-us/library/ie/dn265022(v=vs.85).aspx以獲取有關如何操作的信息控制css中的默認操作。