2015.8.7-21js(简单拖拽)

/*1.简单拖拽,三个事件：鼠标按下，鼠标抬起，鼠标移动*/
window.onload = function(){
    var oDiv = document.getElementById("wrap");
    var disX = 0;       //横向坐标
    var disY = 0;       //纵向坐标
    //鼠标坐标减去div的坐标（因为值是不变的，只需要知道鼠标的坐标就可以移动div）
    oDiv.onmousedown = function(ev){
        var oEvent = ev || event;
        //算出鼠标与div的距离差值
        disX = oEvent.clientX - oDiv.offsetLeft;        
        disY = oEvent.clientY - oDiv.offsetTop;

        //document移动快时，鼠标也不会离开div
        document.onmousemove = function(ev){
            var oEvent = ev || event;
　　　　　　　//（新的鼠标值-差值）=新div的值
            var newLeft = oEvent.clientX - disX;
            var newTop = oEvent.clientY - disY;

            //如果移动最左边就等于最左边值，防止移出
            if(newLeft < 0){
                newLeft = 0;
            }else if(newLeft > document.documentElement.clientWidth - oDiv.offsetWidth){
                newLeft = document.documentElement.clientWidth - oDiv.offsetWidth;
            }
            if(newTop < 0){
                newTop = 0;
            }else if(newTop > document.documentElement.clientHeight - oDiv.offsetHeight){
                newTop = document.documentElement.clientHeight - oDiv.offsetHeight;
            }

            //（新的鼠标值-差值）=新div的值
            oDiv.style.left =  newLeft + "px";     
            oDiv.style.top =  newTop+ "px";
        }

        //松开鼠标后销毁事件
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
        }

        return false;
    }  
}