Html HTML5 拖放在 IE11 上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18065840/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 drag and drop not working on IE11
提问by avi.tavdi
Got HTML5 native drag and drop applied, drop is no working with IE, working well with chrome and firefox.
应用了 HTML5 原生拖放，拖放不适用于 IE，适用于 chrome 和 firefox。
the dragging appears to be working but drop isnt happaning on IE.
拖动似乎正在工作，但在 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.
另一个小问题 - 在 IE 中，我的可拖动元素周围有一个半透明的正方形，但它的背景是透明的（图像就是这样完成的），而在 chrome/firefox 上，我没有那个正方形，并且在拖动时图像看起来没有任何背景.
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.
我删除了一些打印代码，使代码更短。
回答by alexbooots
IE10/11 uses Text as the data string and it breaks if you use text/plain. If you use Text, it breaks in Firefox.
IE10/11 使用 Text 作为数据字符串，如果您使用 text/plain，它会中断。如果您使用 Text，它会在 Firefox 中中断。
I get around this by doing something like this in whatever drag and drop functions I need to write:
我通过在我需要编写的任何拖放函数中做这样的事情来解决这个问题：
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;
}
})();
I'd love to know of a solution that doesn't use userAgent sniffing.
我很想知道一个不使用 userAgent 嗅探的解决方案。
回答by alexbooots
If someone does not drag and drop in IE 8.1 W at 11 just in the Internet Options Security tab and remove the check mark box protected mode or run IE as administrator
如果有人没有在 Internet 选项安全选项卡中拖放 IE 8.1 W at 11 并删除复选框保护模式或以管理员身份运行 IE
回答by Niet the Dark Absol
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.
您正在设置 type 的数据text/plain，但检索 type 的数据Text。虽然某些浏览器可能将它们理解为一回事，但其他浏览器可能不会。在这种情况下，似乎 Internet Explorer 是迂腐的，而 Chrome 和 Firefox 则是松懈的。
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.
就个人而言，我建议使用Text. 它可能很旧，但如果对事件处理进行一些小的调整，那么即使可以追溯到 IE5，它也可以正常工作。
回答by DaddioNTS
The problem is the browser defaults to pan actions rather than touch actions...look at http://msdn.microsoft.com/en-us/library/ie/dn265022(v=vs.85).aspxfor information on how to control default action in css.
问题是浏览器默认为平移操作而不是触摸操作...查看http://msdn.microsoft.com/en-us/library/ie/dn265022(v=vs.85).aspx了解有关如何操作的信息控制css中的默认操作。
