HTML的拖拽onDragStart、onDragEnter、onDragEnd在火狐上遇到的问题

1、让元素可以拖拽

<div draggable="true"></div>

2、总共有7个拖拽事件

dragstart：开始拖元素触发
dragenter：元素拖进可drop元素（绑定drop事件的元素）时触发
dragover：当元素拖动到drop元素上时触发
drop：当元素放下到drop元素触发
dragleave ：当元素离开drop元素时触发
drag：每次元素被拖动时会触发
dragend：放开拖动元素时触发

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放

3、拖拽事件在兼容火狐和IE时会存在的问题

兼容火狐只需要在dragstart函数中加入ev.dataTransfer.setData("随意","随意")即可；随意代表写什么都可以；这里只是为了兼容火狐；实例如下

dragstart(event){ 
    event.dataTransfer.setData("name","drag"); //设置拖拽数据
}

如果只加入上述代码，在火狐浏览器每次拖拽会打开新的网页，交互非常的不友好，是由于冒泡和默认事件导致

dragenter(event){ //也可以在dragover中添加
    e.stopPropagation();//阻止冒泡
    e.preventDefault();//阻止默认行为
}

在IE中的dataTransfer是不存在setData的，所以这里应该判断下是否是火狐浏览器，不是的话不应该执行event.dataTransfer.setData("name","drag")

var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器
var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器