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 .