HTML5拖放不能在IE11上工作 [英] HTML5 drag and drop not working on IE11

问题描述

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

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

这是下拉区域：

 < div id =4x2class =dropAreadraggable =falseondragenter =drag_enter（event）; return false; ondrop =drag_drop（event）; return false; ondragover =return falseondragleave =drag_leave（event）; return false; data-droppable =trueonmouseover =return mouseOver（this）; return false; onclick =return movePlayer（this）; return false; onmouseout =return mouseOut（this）; return false;> 
< / div> 
  

这是draggable元素：

 < div id =player1draggable =trueondragstart =drag_start（event）; return false; ondragend =drag_end（event）; return false; data-droppable =falseonclick =return selectPlayer（this）; return false;数据可选择= 真 >< / DIV> 
  

  function drag_start（e） 
 {
 e.dataTransfer.effectallowed ='copy'; 
 e.dataTransfer.dropEffect ='copy'; 
 e.dataTransfer.setData（text / plain，e.target.getAttribute（'id'））; 
} 
 
函数drag_enter（e）{
 
 if（e.target.getAttribute（'data-droppable'）=='true'）{
 e.target.style.backgroundImage =url（images / board_cell_background_highlight.png）; 
} 
 
函数drag_leave（e）{
 
 if（e.target.getAttribute（'data-droppable'）=='true'）{
 e.target.style.backgroundImage =url（images / board_cell_background.png）; 
} 
 
 
函数drag_drop（e）{
 var element = e.dataTransfer.getData（Text）; //玩家
 if（e.preventDefault）{
 e.preventDefault（）; 
} 
 if（e.stopPropagation）{
 e.stopPropagation（）; 
} 
 if（e.target.getAttribute（'id'）==player1|| e.target.getAttribute（'id'）==player2）{
 alert （无效移动）; 
返回false; 
} 
 
 e.target.style.backgroundImage =url（images / board_cell_background.png）; 
 moveHandler（element，e.target.getAttribute（'id'））; 
} 
 
函数drag_end（e）{
 e.dataTransfer.effectallowed ='copy'; 
 alert（drop end）
} 
} 
} 
  

我删除一些打印东西的代码，使代码更短。

解决方案

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

我个人建议使用 Text 。这可能是老的，但是这样做会使其工作正常，即使像IE5一样早，如果内存服务，给予一些小的调整事件处理。

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.

解决方案

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.

这篇关于HTML5拖放不能在IE11上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！