logo标签列表

Internet Explorer 9拖放（DnD）

htmldrag-and-dropinternet-explorer-9
31

有人知道为什么以下网站的拖放示例（以及许多其他在线教程）在Internet Explorer 9中无法工作吗？Chrome，FireFox和Safari都可以正常工作。

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

我认为IE9应该是最符合HTML5的浏览器？特别是DnD方面，因为自IE5以来就一直支持它。我需要更改某个设置吗？

随着我对HTML5和CSS3的不断研究，我越发感觉IE9的不足之处。

有人有在IE9中可用的DnD教程链接吗？

4
@BrainSlugs: 真的吗？我的只能愉快地选择文本，除此之外什么也做不了。下面提到的其他例子可以正常工作。 - kaitsu
9个回答
25

我已经找到了一种解决方案，可以使原生的拖放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
15
一种更方便的解决方案是这样做：$(container).bind('selectstart', function(){this.dragDrop(); return false;});。该代码用于禁止容器内的文字被选中并实现拖拽功能。 - Farhadi
2
在原型中：document.on("selectstart", "[draggable]", function(event, element) { event.stop(); element.dragDrop(); }); - 为所有 [draggable] 元素设置一个全局事件观察器。 - Victor
1
如果你有多个div，你该如何绑定它们？ - Ionut Flavius Pogacian
@IonutFlaviusPogacian：请发布一个问题或重新表达。如果我理解正确，jQuery默认会绑定多个元素的事件，除非您使用类似“eq(n)”这样的方法获取特定的jQuery包装元素，然后再进行绑定。 - Phil
2
@Farhadi的回答值得一些点赞！三年后，现代（jQuery 1.11）的等效方法是$(container).on('selectstart', function(){this.dragDrop(); return false;});。似乎不需要更多特定于浏览器的代码来进行拖放、拖放结束等操作。而且它不会对Chrome、Firefox和IE10+造成任何额外的问题，这些浏览器都会忽略IE9特定的代码。 - MSC
1
@MSC 在Chrome和其他浏览器中似乎dragDrop未定义。现在可以将其包装在if (this.dragDrop) {}中。 - Pipo
21

我曾在IE9中遇到了这种奇怪的行为，似乎IE9无法在div上执行拖放操作（HTML 5风格）。如果你将div更改为带有href="#"的A标签，你就可以进行拖放操作。

这个不会拖动：

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

而这将会：

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

希望这对任何人有所帮助。

2
发布了一个解决方案，使得除链接和图片之外的容器在ie9中可拖动。 - Lea Rosema
3
结果证明这是问题所在。我使用了jQuery并创建了一个工作的拖放示例，位于http://www.springfieldspringfield.co.uk/stuff/dnd/dnd.html。 - SteveJ
2
@SteveJ 如果霍默吃掉所有的甜甜圈，我期望会发生某些事情。 - user669677
3
FYI，这个答案很接近，但更准确的问题描述如下：问题不在于IE不能在div元素上进行拖放操作，而是它在display:block;元素上无法正确执行。 - Cho Naseo
3

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

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

它停止了选择并开始拖动。
此外，您可以使用modernizr来检测HTML5拖放是否受支持，并让它们跳过此步骤。这是一个链接：https://dev59.com/7nE85IYBdhLWcg3wShWf - Phil
2
这个拖放示例在IE9中可以正常工作。
我认为来自HTML5Rocks的示例在IE9中不起作用，因为它使用了一些CSS3特性，而IE9的CSS3支持不好。
此外，一些JS事件和方法在IE中也不能正常工作。例如，即使在IE9中，setDragImage()也无法正常工作。这也是其中一个原因。
它能够工作，只是没有显示被拖动的淡化版本。但是所有事件都在触发。 - Donny V.
是的，html5demos.com/drag在IE9中运行良好（截至2015年7月）。准确来说是9.0.8112.16421版本。问题是，它仍然只是一堆链接，这与其他兼容IE9的演示相同。 - MSC
1

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

我也一直在研究这个问题，我发现Opera 11.50也存在同样的基本问题；它和IE9都不理解HTML5的draggable属性，也不理解HTML5的拖放事件。

作为一种解决方法，我找到了这篇Opera文章http://dev.opera.com/articles/view/accessible-drag-and-drop/，它使用mousedown、mouseover、mousemove、mouseout和mouseup事件来模拟拖放支持。当然，这需要很多工作，但它确实可以让你在Opera中获得dnd支持。

你可以在http://devfiles.myopera.com/articles/735/example.html上看到一个实时演示。

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

0

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

0
0

使用默认设置为可拖动属性的元素。它们是 <div> 和 <span>，这样就可以工作了。 祝好！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接