Js、拖拽问题的完善

编写拖拽元素的时候，往往会出现各种各样的小问题：

如何编写拖拽的代码（自己处理好兼容性问题和position问题）：

1.首先要获取鼠标点下时候，与拖拽元素的相对位置。定义这个相对位置的坐标disX；disY。

即：var disX=0；var disY=0；

2.鼠标按下(onmousedown)时，获取这个相对位置的坐标(disX,disY)。disX=鼠标的坐标的X-元素的X坐标(left值)；disY=鼠标的坐标的Y-元素的Y坐标(top值)。

即：disX=Event.clientX-obj.offersetLeft；disY=Event.clientY-obj.offersetTop；

3.再设置拖拽元素(onmousemove)的坐标位置（到左边距离X,到顶部距离Y）。X=鼠标的坐标的X-相对坐标的X；Y=鼠标的坐标的Y-相对坐标的Y；

即：obj.style.left=Event.clientX-disX；obj.style.top=Event.clientY-disY；

这里要注意拖拽的时候，触发事件是document.onmousemove，不然会元素可能出现跟不上鼠标的移动速度（可能是电脑的计算速度没有达到秒天秒地的情况导致的）。

4.最后设置鼠标点击弹起时，要取消按下和拖拽两个触发事件，不然会出现漏洞：

即：document.onmouseup=function (){document.onmousemove=null;document.onmouseup=null;};

5.此时会有不同的问题出现（元素飞出屏幕，无法再次“选中”该元素，火狐浏览器还会出现残影等等）：

处理元素不飞出屏幕的情况：元素的left值（X坐标）的范围是0

（写在步骤3事件里）即：

if(obj.style.left<0){obj.style.left=0;}

else if(obj.style.left>document.documentElement.clientWidth-obj.offsetWidth)

{obj.style.left=document.documentElement.clientWidth-obj.offsetWidth;}

if(obj.style.top<0){obj.style.top=0;}

else if(obj.style.top>document.documentElement.clientHeight-obj.offsetHeight)

{obj.style.top=document.documentElement.clientHeight-bj.offsetHeight;}

残影问题：在事件最后return false；

代码如下：

< / body>