Internet Explorer 9 拖放 (DnD)

Posted 2023-02-21

【中文标题】Internet Explorer 9 拖放 (DnD)

【英文标题】：Internet Explorer 9 Drag and Drop (DnD)

【发布时间】：2011-07-26 21:59:04

【问题描述】：

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

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

我认为 IE9 应该是最符合 HTML5 的浏览器？尤其是 DnD，因为他们从 IE5 开始就一直支持它。我必须在某处更改设置吗？

我使用 HTML5 和 CSS3 的次数越多……IE9 越缺乏。

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

【问题讨论】：

@BrainSlugs：真的吗？我的一直很高兴地选择文本，仅此而已。下面提到的其他示例确实有效。

【参考方案1】：

我找到了一种解决方法，可以让原生 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

【讨论】：

更方便的解决办法是：$(container).bind('selectstart', function()this.dragDrop(); return false;);

在原型中：document.on("selectstart", "[draggable]", function(event, element) event.stop(); element.dragDrop(); ); - 所有[draggable] 元素的一个全局事件观察者

如果你有多个 div 怎么办？您将如何将它们全部绑定？

@Farhadi 的回答值得加分！三年过去了，现代（jQuery 1.11）等价物是$(container).on('selectstart', function()this.dragDrop(); return false;); 似乎不再需要用于放置、拖动等的特定于浏览器的代码。并且它不会对忽略 IE9 特定代码的 Chrome、Firefox 和 IE10+ 造成任何额外的问题。

@MSC 似乎 dragDrop 在 Chrome 和其他浏览器中未定义。如果现在将其包装在if (this.dragDrop) 中。

【参考方案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>

希望这对任何人都有帮助

【讨论】：

发布了一个解决方法，使除链接和图像之外的容器在 ie9 中可拖动

原来是这个问题。我使用 jQuery 并创建了一个 DnD 的工作示例，位于... springfieldspringfield.co.uk/stuff/dnd/dnd.html

@SteveJ 我预计如果荷马吃掉所有甜甜圈会发生一些事情

仅供参考，这个答案很接近，但对问题的更准确描述如下：问题不在于 IE 不对 div 元素进行拖放。问题是它在display: block; 元素上没有正确执行。

【参考方案3】：

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

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

它停止选择并开始拖动。

【讨论】：

此外，您可以使用modernizr 来检测是否支持HTML5 拖放并让他们跳过此操作。这是一个链接：***.com/questions/2856262/…

【参考方案4】：

This DnD example 在 IE9 中工作。

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

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

【讨论】：

它可以工作，只是不会显示它的褪色版本被拖动。但所有事件都在触发。

是的，html5demos.com/drag 在 IE9 中运行良好（2015 年 7 月发言）。准确地说是 9.0.8112.16421。问题是，它仍然只是一堆链接，与其他兼容 IE9 的演示相同。

【参考方案5】：

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

作为一种解决方法，我确实在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 浏览器兼容。

【参考方案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;
            
        
    );

【参考方案7】：

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

【参考方案8】：

我建议使用jQuery UI's draggable。

【参考方案9】：

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