h5拖拽在兼容火狐与IE的实现需要注意的事

简述HTML5拖放

拖放是HTML5标准的一部分，任何元素都能够拖放，也能够将本地的文件拖放到页面上。

设置元素可拖放

为了使元素可拖动，把 draggable 属性设置为 true

<img draggable="true" />

拖放事件

有7个拖放事件可以捕获，如下：

dragstart：开始拖元素触发

dragenter：元素拖进可drop元素（绑定drop事件的元素）时触发

dragover：当元素拖动到drop元素上时触发

drop：当元素放下到drop元素触发

dragleave ：当元素离开drop元素时触发

drag：每次元素被拖动时会触发

dragend：放开拖动元素时触发

完成一次拖放的事件过程是： dragstart –> dragenter –> dragover –> drop –> dragend

浏览器支持

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

h5拖拽在兼容火狐与IE的实现需要注意的事

1. Firefox拖拽必须携带数据，也就是说必须出现这个：

ev.dataTransfer.setData("infoName"," ");

1. IE中出现setData这个会报错，不知道啥原因~，兼容的写法：

//拖拽开始
    var evId; 
    function drag(ev){
//        console.log("dataTransfer");
        if(Browser.name == "FF"){
            console.log(ev.dataTransfer.setData("imgInfo", ev.target.id)); // 火狐拖拽必须携带数据 IE偏偏不支持这个
        }
        evId = ev.target.id; // IE不支持，但可以这样
    }
    //拖拽结束
    function drop(ev){
        var info = evId；
        // do something
    }

附上获取浏览器信息的方法：

//判断当前浏览类型
        function BrowserType()
        {
            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浏览器

            if (isIE)
            {
                var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
                reIE.test(userAgent);
                var fIEVersion = parseFloat(RegExp["$1"]);
                return {name:"IE",num: fIEVersion};
            }//isIE end

            if (isFF) { return {name:"FF",num: "FF"};}
            if (isOpera) { return {name:"Opera",num: "Opera"};}
            if (isSafari) { return {name:"Safari",num: "Safari"};}
            if (isChrome) { return {name:"Chrome",num: "Chrome"};}
            if (isEdge) { return {name:"Edge",num: "Edge"};}
        }
        Browser = BrowserType();

然后就有效果了

火狐下：

IE下：

拖拽的过程是有这个跟着鼠标的。。只是没录制到