javascript - Internet Explorer 9 中不再触发事件 ondragstart

Question

我已经实现了 HTML5 drag and drop在 DIV 上。它适用于所有浏览器，包括 IE8。但是自从 IE9 发布后，它就不再有效了。 ondragstart 事件不会被触发。这是我的代码，使用 jQuery:

$('#mydiv')
   .bind('selectstart', function(e) {
        // Prevent text selection
        return false;
    })
    .bind('dragstart', function(e) {
        console.log('dragstart');
    })
    .bind('drag', function(e) {
        console.log('drag');
    })
    .bind('dragend', function(e) {
        console.log('dragend');
    });

和 HTML

<div draggable="true">DnD this thing!</div>

Answer 1

我敢打赌这在 IE8 中不起作用，因为 IE8 或 IE9 都不完全支持 HTML5 拖放，这只是在 IE10 Developer Preview 2 中添加的. HTML5 API是基于IE5中拖放的实现，但也有一些区别。最相关的是，IE9 及之前的版本不支持元素的 draggable 属性 - 在 IE9 中唯一可以拖动的是默认情况下可拖动的内容:文本选择、链接和图像。

因此，为了使其在 IE9(或 IE8)中工作，您需要在 HTML 中添加一个链接(并且该链接必须具有 href):

<div id="mydiv"><a draggable="true" href="#">DnD this thing!</a></div>

然后您的 JavaScript 应该可以按预期工作，只需稍作修改即可:

$('#mydiv')
   .bind('selectstart', function(e) {
        // Prevent text selection
        return false;
    })
    .bind('dragstart', function(e) {
        e.originalEvent.dataTransfer.setData("Text", $(e.target).closest('div').attr('id'));
        console.log('dragstart');
    })
    .bind('drag', function(e) {
        console.log('drag');
    })
    .bind('dragend', function(e) {
        console.log('dragend');
    })
    .bind('click', function(e) {
        return false;
    });

Here's an example which I've tested in Firefox and IE9 .