Question

有谁知道为什么以下网站拖放示例（以及许多其他在线教程）在Internet Explorer 9中不起作用？ Chrome，FireFox和Safari都可以。

http://www.html5rocks.com/tutorials/dnd/basics/

我认为IE9被认为是最符合HTML5标准的浏览器？尤其是自从IE5以来它们一直支持DnD。我是否必须在某处更改设置？

我玩HTML5和CSS3越多...... IE9缺乏的越多。

有没有人有任何可以在IE9中使用的DnD教程的链接？

Answer 1

我找到了一个workarround来使本机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

Answer 2

我在IE9中遇到过同样奇怪的行为，似乎IE9不会对div进行拖放（HTML 5样式）。如果你想用href =“＃”更改A的div，你就可以拖放了。

这不会拖延：

<div data-value="1" class="loadedmodule-container" draggable="true">drag</div>

这将：

<a href="#" data-value="1" class="loadedmodule-container" draggable="true">drag</a>

希望这有助于任何人

Answer 3

我遇到了同样的问题。这个技巧对我有用：

node.addEventListener('selectstart', function(evt) {
    this.dragDrop();
    return false;
}, false);

停止选择并开始拖动。

Answer 4

This DnD example正在IE9中运行。

由于CSS3功能，我认为the example from HTML5Rocks在IE9中不起作用。该示例使用了几个CSS3功能，但IE9的CSS3支持并不好。

此外，一些JS事件和方法在IE中不起作用。例如，setDragImage()即使在IE9中也不起作用。这也是其中一个原因。

Answer 5

我一直在看这个，我发现Opera 11.50有同样的基本问题;它和IE9都不理解HTML5可拖动属性，也不理解HTML5拖放事件。

作为一种解决方法，我确实在http://dev.opera.com/articles/view/accessible-drag-and-drop/找到了这篇歌剧文章，它模仿了mousedown，mouseover，mousemove，mouseout和mouseup事件的拖放支持。当然，这是很多工作，但它确实给你支持Opera。

您可以在http://devfiles.myopera.com/articles/735/example.html

看到现场演示

同样的dnd仿真技巧适用于IE9，并且似乎与其他HTML5浏览器兼容。

Answer 6

这对我有用。它使得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;
            }
        }
    });
}

Answer 7

我建议使用jQuery UI's draggable。

Answer 8

我和上面的Didier Caron有同样的问题。可拖动的div不起作用，但锚标签工作正常。我在HTML5 Doctor找到了解决方案。

Answer 9

默认使用draggable属性设置为true的元素。他们和它应该工作干杯

Internet Explorer 9拖放（DnD）

9 个答案: