イベントondragstartはInternet Explorer 9でトリガーされなくなりました

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またはIE9どちらも完全にHTML5のドラッグ＆ドロップをサポートしているため、IE8で動作しませんでした賭けだが、それはです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。