js实现拖拽函数

如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。

1. onmousedown：鼠标按下事件
2. onmousemove：鼠标移动事件
3. onmouseup：鼠标抬起事件

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

html代码

<div style="" id="parent">
        <div style="" id="child">
        </div>
</div>

css代码

#parent{
    position:relative;
    500px;
    height:500px;
    background:#ccc;
}
#child{
    position:absolute;
    500px;
    height:500px;
    top:0;
    left:0;
    cursor:pointer;
    background:#f00;
}

js代码

     参数说明：当参数为一个时，拖动元素相对于浏览器窗口拖动
　　　　　　　　当参数为两个时，拖动元素相对于指定的父元素拖动
　　　　　　　　obj：被拖动元素的id
　　　　　　　　parentNode：被拖动元素相对拖动的父盒子id

 1     /*******************拖拽函数***********************/
    function drag(obj,parentNode){
          var obj = document.getElementById(obj);
          if(arguments.length == 1){
            var parentNode = window.self; 
            var pWidth = parentNode.innerWidth,pHeight = parentNode.innerHeight;  
            /*console.log("pWidth:"+pWidth+",pHeight:"+pHeight);*/
          }else{
            var parentNode = document.getElementById(parentNode);
            var pWidth = parentNode.offsetWidth,pHeight = parentNode.offsetHeight;
          }
          obj.onmousedown = function(ev){
            var ev = ev || event;
            /*console.log("clientX:"+ev.clientX+",clientY:"+ev.clientY);
            console.log("this.offsetLeft:"+this.offsetLeft+",this.offsetTop:"+this.offsetTop);*/
            var disX = ev.clientX - this.offsetLeft,disY = ev.clientY - this.offsetTop;
            var oWidth = obj.offsetWidth,oHeight = obj.offsetHeight;
              
            //阻止冒泡时间
            ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;
            
              
            document.onmousemove = function(ev){
              var ev = ev || event;
              obj.style.left = ev.clientX - disX + 'px';
              obj.style.top = ev.clientY - disY+ 'px';
              /*console.log("disX:"+disX+",disY:"+disY);  
              console.log("obj.style.left:"+obj.style.left+",obj.style.top:"+obj.style.top);  */
              //左侧
              if(obj.offsetLeft <=0){
                obj.style.left = 0;
               /* console.log("111111111111111111111111");*/
              };
              //右侧
              if(obj.offsetLeft >= pWidth - oWidth){
                obj.style.left = pWidth - oWidth + 'px'; 
              };
              //上面
              if(obj.offsetTop <= 0){
                obj.style.top = 0; 
              };
              //下面
              if(obj.offsetTop >= pHeight - oHeight){
                obj.style.top = pHeight - oHeight + 'px'; 
              };
            };
            document.onmouseup = function(ev){
              var ev = ev || event;
              document.onmousemove = document.onmouseup = null;
            };
          }
              
    }

调用拖拽函数

drag("child","parentNode");