Internet Explorer 9不再觸發事件ondragstart

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。