Question

我在DIV上实施了HTML5 drag and drop。它适用于所有浏览器，包括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

Internet Explorer 9中不再触发事件ondragstart

1 个答案: