鼠标拖拽效果在IE8下兼容-原创手记-慕课网

前段时间在慕课网上学习了鼠标拖拽效果，于是乎动手在自己的项目中实践。在实践过程中发现拖拽效果不能能够很好的兼容IE8浏览器，于是尝试去解决这个问题。

首先，发现这个问题是测试人员说我的登录框在猎豹，ie8下看不到，我就立马debug 查看发现是因为浏览器的监听事件的方式不同 于是编写了下面的代码来解决：

function addevent(ele,event,callback){
if(ele.addEventListener){
ele.addEventListener(event,callback,false);
}
elseif(ele.attachEvent){
ele.attachEvent('on'+event,callback);
}
}

补全上述代码并且调用后，在ie8下能看到登录框了,但是ie8提示我参数错误

instace.mouseOffsetLeft = e.pageX - instace.moveElement.offsetLeft ;

没错就是他，ie8上报的错误是“参数无效”。
经过仔细的查找发现无效的参数是 e.pageX 原因是 ie9 以下的版本不支持e.pageX 属性.
so，有加上了一个判断浏览器的代码

  if (isIE) {
    var IE5 = IE55 = IE6 = IE7 = IE8 = false;
    var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
    reIE.test(userAgent);
    var fIEVersion = parseFloat(RegExp["$1"]);
    IE8 = fIEVersion == 8.0;

     if (IE8) {
        return "IE8";
    }
}

最终实现鼠标移动的代码片段
if (myBrowser() == "IE8") {
addEvent(instace.dragElement,'mousedown',function(e){
var e = e window.event;
dialogInstace = instace;
instace.mouseOffsetLeft = e.clientX - instace.moveElement.offsetLeft ;
instace.mouseOffsetTop = e.clientY - instace.moveElement.offsetTop ;
})
}
else{
addEvent(instace.dragElement,'mousedown',function(e){
var e = e window.event;
dialogInstace = instace;
instace.mouseOffsetLeft = e.pageX - instace.moveElement.offsetLeft ;
instace.mouseOffsetTop = e.pageY - instace.moveElement.offsetTop ;
})
}
最终解决了在ie8下，能兼容拖拽效果.
再此感谢慕课网提供的鼠标拖拽教程。
祝慕课网越办越好。

鼠标拖拽效果在IE8下兼容原创