Html Internet Explorer 9 拖放 (DnD)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5500615/
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
Internet Explorer 9 Drag and Drop (DnD)
提问by SteveJ
Does anyone know why the following web site drag and drop examples (plus many other tutorials online) don't work in Internet Explorer 9? Chrome, FireFox and Safari are all OK.
有谁知道为什么以下网站拖放示例（以及许多其他在线教程）在 Internet Explorer 9 中不起作用？Chrome、FireFox 和 Safari 都可以。
http://www.html5rocks.com/tutorials/dnd/basics/
http://www.html5rocks.com/tutorials/dnd/basics/
I thought IE9 was suppose to be the most HTML5 compliant browser? Especially with DnD since they have been supporting it since IE5. Do I have to change a setting somewhere?
我认为 IE9 应该是最符合 HTML5 的浏览器？特别是 DnD，因为他们从 IE5 开始就支持它。我必须在某处更改设置吗？
The more I play with HTML5 and CSS3...the more IE9 lacks.
我越玩 HTML5 和 CSS3...IE9 越缺乏。
Does anyone have any links to DnD tutorials that work in IE9?
有没有人有任何适用于 IE9 的 DnD 教程的链接？
采纳答案by Didier Caron
Well i have encountered this same weird behaviour in IE9, it appears to be that IE9 wont do a Drag and Drop (HTML 5 style) on div's. if you would change the div for a A with href="#" you will be able to drag and drop.
好吧，我在 IE9 中遇到了同样奇怪的行为，似乎 IE9 不会在 div 上执行拖放（HTML 5 样式）。如果您使用 href="#" 更改 A 的 div，您将能够拖放。
this won't drag:
这不会拖：
<div data-value="1" class="loadedmodule-container" draggable="true">drag</div>
and this will:
这将：
<a href="#" data-value="1" class="loadedmodule-container" draggable="true">drag</a>
Hope this helps anyone
希望这可以帮助任何人
回答by Lea Rosema
I've found a workarround to make the native dnd api also work in IE with elements other than links and images. Add a onmousemove handler to the draggable container and call the native IE function element.dragDrop(), when the button is pressed:
我找到了一种解决方法，可以使本机 dnd api 也可以在 IE 中使用链接和图像以外的元素运行。向可拖动容器添加一个 onmousemove 处理程序，并在按下按钮时调用原生 IE 函数 element.dragDrop()：
function handleDragMouseMove(e) {
var target = e.target;
if (window.event.button === 1) {
target.dragDrop();
}
}
var container = document.getElementById('widget');
if (container.dragDrop) {
$(container).bind('mousemove', handleDragMouseMove);
}
// todo: add dragstart, dragover,... event handlers
回答by Ali Gangji
I've encountered the same problem. This trick works for me:
我遇到了同样的问题。这个技巧对我有用：
node.addEventListener('selectstart', function(evt) {
this.dragDrop();
return false;
}, false);
It stops the selection and starts the dragging.
它停止选择并开始拖动。
回答by Sanghyun Lee
This DnD exampleis working in IE9.
此 DnD 示例适用于 IE9。
I think the example from HTML5Rocksis not working in IE9 because of CSS3 features. The example used several CSS3 features but IE9's CSS3 support is not good.
我认为HTML5Rocks 中的示例由于 CSS3 功能在 IE9 中不起作用。该示例使用了几个 CSS3 特性，但 IE9 的 CSS3 支持并不好。
Furthermore, some of JS events and methods are not working in IE. For example setDragImage()is not working even in IE9. This is also one of the reason.
此外，某些 JS 事件和方法在 IE 中不起作用。例如，setDragImage()即使在 IE9 中也不起作用。这也是原因之一。
回答by Bernardo
This works for me. It makes IE9 behave like other modern browsers as far as drag/drop:
这对我有用。它使 IE9 在拖放方面表现得像其他现代浏览器：
if (document.doctype && navigator.appVersion.indexOf("MSIE 9") > -1) {
document.addEventListener('selectstart', function (e) {
for (var el = e.target; el; el = el.parentNode) {
if (el.attributes && el.attributes['draggable']) {
e.preventDefault();
e.stopImmediatePropagation();
el.dragDrop();
return false;
}
}
});
}
回答by adamrmcd
I've been looking at this too, I've found that Opera 11.50 has the same basic issue; both it and IE9 do not understand the HTML5 draggable attribute, nor the HTML5 drag-and-drop events.
我也一直在研究这个，我发现 Opera 11.50 有同样的基本问题；它和 IE9 都不了解 HTML5 的可拖动属性，也不了解 HTML5 的拖放事件。
As a workaround, I did find this opera article at http://dev.opera.com/articles/view/accessible-drag-and-drop/that emulates drag-and-drop support with mousedown, mouseover, mousemove, mouseout, and mouseup events. Naturally, this is a lot of work, but it does give you dnd support in Opera.
作为一种解决方法，我确实在http://dev.opera.com/articles/view/accessible-drag-and-drop/上找到了这篇歌剧文章，该文章模拟了具有 mousedown、mouseover、mousemove、mouseout 的拖放支持，和 mouseup 事件。当然，这需要大量工作，但它确实为您提供了 Opera 中的 dnd 支持。
You can see a live demo at http://devfiles.myopera.com/articles/735/example.html
您可以在http://devfiles.myopera.com/articles/735/example.html看到现场演示
The same dnd emulation trick works with IE9, and appears compatible with other HTML5 browsers.
相同的 dnd 仿真技巧适用于 IE9，并且似乎与其他 HTML5 浏览器兼容。
回答by Hubert Boma Manilla
use element that have the draggable property set to true by default. they the and it should work Cheers
使用默认将 draggable 属性设置为 true 的元素。他们和它应该工作干杯
回答by AlexC
I would suggest using jQuery UI's draggable.
我建议使用jQuery UI 的 draggable。
回答by jaysmith024
I am having the same problem as Didier Caron above. Draggable divs don't work, but anchor tags work fine. I found a solution at HTML5 Doctor.
我和上面的 Didier Caron 遇到了同样的问题。Draggablediv不工作，但锚标签工作正常。我在HTML5 Doctor找到了一个解决方案。
