HTML5拖放不能在IE11上工作

Question

得到了HTML5原生拖放應用程序，drop與IE無效，可以很好地與Chrome和Firefox合作。

拖動似乎正在工作，但下降不是在IE瀏覽器上喜歡。

另一個小問題 - 在IE中，我的可拖動元素周圍有一個半透明的正方形，但它的背景是透明的（圖像是這樣完成的），而在Chrome/Firefox上我沒有那個正方形，拖動時任何背景。

這是拖放區域：

​​

這是可拖動的元素：

<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類型的數據。雖然有些瀏覽器可能會理解它們是一樣的，但其他瀏覽器可能不會。在這種情況下，似乎IE瀏覽器正在肆虐，而Chrome和Firefox則處於鬆懈狀態。我個人建議使用Text。它可能已經老了，但這正是它能夠正常工作的原因，即使早在IE5之前，如果內存服務的話，只要對事件處理做一些小的調整即可。

Answer 2

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

Answer 3

如果有人不拖，並在IE 8.1 W上11只是在Internet選項安全選項卡掉落和取消勾選複選框保護模式或運行IE以管理員身份

Answer 4

IE10/11使用文本作爲數據串如果你使用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嗅瞭解決方案。