IE9和IE10下Drag&Drop的问题及解决

最近做了一些关于拖拽的coding，总体来说 html5 提供的 Drag&Drop 还是很好用的，也比较简单。但是在IE9和IE10上面遇到了两个问题，在这里记录一下。

关于e.dataTransfer.setData

e.dataTransfer.setData 在IE下面是有问题的，这个解决起来比较复杂，建议是使用一个公共的变量，比如叫key，在onDrag的时候给key赋值，然后在ondrop事件中使用，这样就可以规避e.dataTransfer.setData的兼容性问题了。

IE10下ondrop无法工作

以下是有问题的代码片断（使用的reactjs）,注意看下，最开始在chrome调试的时候，onDragEnter是被注释掉了，chrome中整体的拖拽功能是没问题的。

<div key={`${ score }-${ i }`} onDragLeave={this.dragLeaveHandler} // onDragEnter={this.dragEnterHandler} onDragOver={this.dragOverHandler} onDrop={(e) => { this.dropHandler(e, score, i); }} className="score-block"> { answerItem ? <p className="score"><span>{answerItem.juzi_code}</span></p> : null } </div>

可是上面的代码在IE10下一直无法工作，查了很多资料，都一直在说e.dataTransfer.setData一定要用setData("text",value)传值，尝试了很多次都没有解决，最后发现，将ondragenter的注释去掉就搞定了。

<div key={`${ score }-${ i }`} onDragLeave={this.dragLeaveHandler} onDragEnter={this.dragEnterHandler} onDragOver={this.dragOverHandler} onDrop={(e) => { this.dropHandler(e, score, i); }} className="score-block"> { answerItem ? <p className="score"><span>{answerItem.juzi_code}</span></p> : null } </div>

注意：IE10在实现拖拽的时候，target上必须绑定ondragover、ondragleave、ondragenter和ondrop事件，并且都有e.preventDefault();，屏蔽默认事件。

IE9下ondrag无法工作

IE9下面的问题是被拖拽元素无法起作用。

注意：IE9只支持链接（a标签）和图片（img标签）的拖拽，其他的标签设置了拖拽也不会工作，

这样在ie9下是错误的:

<div data-value="1" class="loadedmodule-container" draggable="true">drag</div>

改成这样就可以了:

<a href="#" data-value="1" class="loadedmodule-container" draggable="true">drag</a>

参考

internet-explorer-9-drag-and-drop-dnd