标签：边框 等等 代码实现 logs 左移 tar www. firefox 知识
上次总结了一下简单的浮出层的设计，不了解的可以猛戳下面这条链接：
这次的这篇总结主要是参考的这篇文章：js拖拽事件实例，不过自己多做了一点分析
这次来总结一下浮出层的拖拽，期间遇到了一些小问题，不过最后也解决了，这里也总结一下。
首先，我们要实现的效果是浮出层在鼠标点击之后随着鼠标移动，松开之后停止移动，并且边框不得超出边界。
网上很多教程已经说得很清楚了，这里就再啰嗦两句，这个过程总共分为三步：
还需要一些额外的知识，是关于offsetWidth,offsetLeft等等，在网上找到一篇文章不错（图画的比较清楚），链接如下：
关于offsetWidth、offsetLeft等概念的理解
接下来是代码实现：
1、计算鼠标与浮出层的相对位置
horizen.onmousedown=function(ev) //鼠标按下浮出层 { var oEvent=ev||event;//这里是为了浏览器兼容，大家可以上网去查一下
disX=oEvent.clientX-horizen.offsetLeft; /*鼠标的X坐标减去浮出层的左边距就等于disX, 这个disX是用于确定鼠标移动浮出层时鼠标点和浮出层之间的左面距离，
这个距离是不会变的，通过这个新鼠标的X坐标减去disX就是浮出层的Left*/ disY=oEvent.clientY-horizen.offsetTop;
……
……
}
2、根据鼠标的移动计算出浮出层的offsetLeft应有的距离,从而改变浮出层的位置，并根据此距离判断浮出层是否超出边界
horizen.onmousedown=function(ev) { var oEvent=ev||event; disX=oEvent.clientX-horizen.offsetLeft; disY=oEvent.clientY-horizen.offsetTop; document.onmousemove=function(ev) { var oEvent=ev||event; //此处是为了浏览器兼容，大家可以上网去查一下 var oLeft=oEvent.clientX-disX; //新鼠标X坐标减去disX,也就是鼠标移动浮出层后的Left var oTop=oEvent.clientY-disY; if(oLeft<0) //浮出层的Left小于0，也就是移出了左边 { oLeft=0; //就把浮出层的Left设置为0，就不能移出左边 } else if(oLeft>document.documentElement.clientWidth-horizen.offsetWidth) //屏幕宽度减去浮出层的宽度就得出了浮出层到达最右边的宽度 { oLeft=document.documentElement.clientWidth-horizen.offsetWidth; //如果Left大于这个像素，就把Left设置为这个像素 } if(oTop<0） { oTop=0; } else if(oTop>document.documentElement.clientHeight-horizen.offsetHeight） { oTop=document.documentElement.clientHeight-horizen.offsetHeight; } console.log(oLeft); horizen.style.left=oLeft+‘px‘; //浮出层的Left设置为新鼠标X坐标减去disX的值 horizen.style.top=oTop+‘px‘; }; return false; //阻止FireFox的默认事件 bug，（额……不太理解，有大神知道希望赐教） }
3.鼠标松开时清除onmousemove中的事件
document.onmouseup=function() //鼠标松开时 { document.onmousemove=null; //把鼠标移动清除 };
这样我们的浮出层的拖拽就做好了……
一切看似如此完美，可是当我打开浏览器调试的时候却发现，浮出层左边拖拽时会超出边界，右边会到达不了边界，上下也是这样
浏览器也并没有报错，检查了代码也没有错误，最后打了个断点调试了一下，发现在计算鼠标相对位置时，disX（只讨论x轴上的）的值比较小，究其原因是因为offsetLeft过大，上网查了一下以后发现，原来是translate的原因，元素利用translate移动后不会影响offsetLeft的值，意思就是它是按我向左移动前的那个浮出层计算offsetLeft的，那么offset的值自然就会变大了，并且其变大的值就是我向左移动的值（浮出层的width是400px;我想左移动了自身的50%也就是200px），所以我们需要对判定的条件进行一些修改：
if(oLeft<200) //移动前浮出层的Left小于200，也就是移出左边 { oLeft=0; //就把浮出层的Left设置为200，就不能移出左边 } else if(oLeft>document.documentElement.clientWidth-horizen.offsetWidth+200) //屏幕宽度减去DIV的宽度就得出了浮出层到达最右边的宽度， { oLeft=document.documentElement.clientWidth-horizen.offsetWidth+200; //如果Left大于这个值就把Left设置为这个值 }
上下也根据浮出层的高度改一下就可以了
这样我们的浮出层拖拽的效果就真的做好了~
标签：边框 等等 代码实现 logs 左移 tar www. firefox 知识
原文地址：http://www.cnblogs.com/bax-life/p/7373704.html
