解决HTML5拖拽兼容问题

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在HTML5中，拖放是标准的一部分，任何元素都能够拖放。实际应用中浏览器实现HTML5拖拽可能踩到下面的坑。

兼容IE

在dragstart事件中，必须要使用ev.dataTransfer.setData()，否则，即使在html中设置了元素 draggable=true，拖拽也是无效的。其中IE不支持domId模式，而domId模式可以兼容各种主流浏览器。

function drag(ev) {
  ev.dataTransfer.setData('Text', ev.target.id)
  // ev.dataTransfer.setData('domId', ev.target.id)
}

兼容火狐

火狐拖放后，总会默认打开打开新标签页。可以在drop事件中增加阻止事件冒泡来解决这个问题。

function drop(ev) {
  ev.stopPropagation()
  ev.preventDefault()
  var data = ev.dataTransfer.getData('Text')
  // var data = ev.dataTransfer.getData('domId')
  ev.target.appendChild(document.getElementById(data))
}

参考实例

访问Codepen查看完整实例代码及最终效果。