javascript拖拽效果

思路：
1.拖拽用到的三个事件：鼠标按下(onmousedown)、鼠标移动(onmousemove)、鼠标松开(onmouseup)
2.当鼠标按下时：获取鼠标按下的位置、获取元素的当前位置
3.当鼠标移动时：获取窗口的宽度(用于判断边界)、获取鼠标移动的距离(决定元素移动的距离)
4.判断边界：
　　1.当元素的offsetLeft小于0时，元素的offsetLeft为0,
　　2.当元素的offsetTop小于0时，元素的offsetTop为0，
　　3.当元素的offsetLeft大于窗口宽度-元素宽度时，即元素在最右边，此时元素的offsetLeft为窗口宽度-元素宽度
　　4.当元素的offsetTop大于窗口高度-元素高度时，即元素在最下边，此时元素的offsetTop为窗口高度-元素高度
5.当鼠标松开时：关闭开关。

<script type="text/javascript">
        window.onload = function(){
            //获取元素
            var oBox = document.getElementById("box");
            //定义开关
            var bool = false;
            //获取元素的宽高
            var bWidth = oBox.clientWidth;
            var bHeight = oBox.clientHeight;
            //定义变量
            var bx,by,mx,my; 
            oBox.onmousedown = function(e){
                var oEvent = e || event;
                //当鼠标在元素上按下时，打开开关
                bool = true;
                //获取按下鼠标时元素的位置和鼠标的位置
                bx = oBox.offsetLeft;
                by = oBox.offsetTop;
                mx = oEvent.clientX;
                my = oEvent.clientY;
            }
            document.onmousemove = function(e){
                var oEvent = e || event;
                //获取窗口的宽高
                var wWidth = document.documentElement.clientWidth;
                var wHeight = document.documentElement.clientHeight;
                //判断鼠标是否被按下
                if (bool) {
                    //获取鼠标移动的距离
                    var x = oEvent.clientX - mx + bx;
                    var y = oEvent.clientY - my + by;
                    //判断边界
                    x <= 0?x = 0:(x>=wWidth-bWidth?x = wWidth-bWidth:x);
                    y <=0?y = 0:(y>=wHeight-bHeight?y = wHeight-bHeight:y);
                    //元素定位
                    oBox.style.left = x+"px";
                    oBox.style.top = y+"px";
                }
            }
            document.onmouseup = function(){
                //松开鼠标，关闭开关
                bool = false;
            }
        }
    </script>     

<div id="box"></div>

*{margin:0;padding:0;}
#box{width:100px;height:100px;background:red;position: absolute;cursor: move;}