原生js实现拖拽功能

拖拽状态 = 0鼠标在元素上按下的时候{   
  　　拖拽状态 = 1   
 　　 记录下鼠标的x和y坐标   
  　　记录下元素的x和y坐标   
  }  
 鼠标在元素上移动的时候{   
  　　如果拖拽状态是0就什么也不做。   
  　　如果拖拽状态是1，那么   
  　　元素y = 现在鼠标y - 原来鼠标y + 原来元素y   
  　　元素x = 现在鼠标x - 原来鼠标x + 原来元素x   
  }    
 鼠标在任何时候放开的时候{   
  　　拖拽状态 = 0   
}

window.onload=function(){
    var dragObj=document.getElementById(‘box‘);
    dragObj.style.left=‘0px‘;
    dragObj.style.top=‘0px‘;
                
    var mouseX,mouseY,objX,objY;
    var dragging=false;
    var diffX,diffY;

    dragObj.onmousedown=function(event){
        var event=event||window.event;        
        dragging=true;
                    
        mouseX=event.clientX;//初始位置时鼠标的坐标
        mouseY=event.clientY;
        objX=dragObj.offsetLeft;//元素的初始位置
        objY=dragObj.offsetTop;
                    
        diffX=mouseX-objX;//相当于鼠标距物体左边的距离
        diffY=mouseY-objY;
     }       
    document.onmousemove=function(event){
        var event=event||window.event;
        if(dragging){
            //元素左边距等于鼠标移动的宽度加上元素本身的位置
            dragObj.style.left=event.clientX-mouseX+objX+"px";
            dragObj.style.top=event.clientY-mouseY+objY+"px";
                
             //设置边界
            if((event.clientX-diffX)<0){//鼠标到浏览器左边距小于鼠标到obj的左边距
                dragObj.style.left=0+"px";
            }
            //window.innerWidth浏览器显示区域的宽度，dragObj.offsetWidth物体宽度
            else if((event.clientX-diffX)>(window.innerWidth-dragObj.offsetWidth)){
                dragObj.style.left=window.innerWidth-dragObj.offsetWidth+"px";
            }
            if((event.clientY-diffY)<0){
                dragObj.style.top=0+"px";
            }
            else if((event.clientY-diffY)>(window.innerHeight-dragObj.offsetHeight)){
                dragObj.style.top=window.innerHeight-dragObj.offsetHeight+"px";
            }
        } 
    }
    document.onmouseup=function(){
        dragging=false;
    }
}
</script>