分类
Javascript

解决HTML5拖拽兼容问题

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

1、在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)
}

2、火狐拖放后,总会默认打开打开新标签页。可以在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))
}

完整实例:https://codepen.io/riafan/pen/GRjmQKm