Internet Explorer 9中不再触发事件ondragstart

Question

我在DIV上实现了HTML5拖放功能.它适用于所有浏览器,包括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;
    });

这是我在Firefox和IE9中测试过的一个例子.