JS 事件基础 高级拖拽

在js事件拖拽中,为解决IE下拖动的问题,要使用事件捕获

  <script>
  window.onload=function()
  {
    var oDiv=document.getElementById('div1');
    var disX=0;
    var disY=0;

    //封装一个函数用于获取鼠标坐标
        function getPos(ev)
        {
           var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
           var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;  

           return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};     
        }



        oDiv.onmousedown=function(ev)
        {
           var oEvent=ev||event;
           var pos=getPos(oEvent);  //这样就可以获取鼠标坐标,比如pos.x表示鼠标横坐标

           disX=pos.x-oDiv.offsetLeft;
           disY=pos.y-oDiv.offsetTop;


           if(oDiv.setCapture)   //ie下
           {
              oDiv.onmousemove=function(ev)  //ie下使用oDiv
              {
             var oEvent=ev||event;
             var pos=getPos(oEvent);

             //防止div跑出可视框
             var l=pos.x-disX;
             var t=pos.y-disY;
             if(l<0)
             {
              l=0;
             }
             else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
             {
              l=document.documentElement.clientWidth-oDiv.offsetWidth;
             }

             if(t<0)
             {
              t=0;
             }
             else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
             {
              t=document.documentElement.clientHeight-oDiv.offsetHeight;
             }

             oDiv.style.left=l+'px';
             oDiv.style.top=t+'px';
              }

              oDiv.onmouseup=function(ev)
              {
              oDiv.onmousemove=null; //将move清除
              oDiv.onmouseup=null;

              oDiv.releaseCapture();
              }

              oDiv.setCapture();            
           }
           else    //ff下 chrome下
           {
             document.onmousemove=function(ev)  
           /*由于要防止鼠标滑动太快跑出div,这里应该用document.
           因为触发onmousemove时要重新获取鼠标的坐标,不能使用父函数上的pos.xpos.y,所以必须写var oEvent=ev||event;var pos=getPos(oEvent);*/
             {
             var oEvent=ev||event;
             var pos=getPos(oEvent);

             //防止div跑出可视框
             var l=pos.x-disX;
             var t=pos.y-disY;
             if(l<0)
             {
              l=0;
             }
             else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
             {
              l=document.documentElement.clientWidth-oDiv.offsetWidth;
             }

             if(t<0)
             {
              t=0;
             }
             else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
             {
              t=document.documentElement.clientHeight-oDiv.offsetHeight;
             }

             oDiv.style.left=l+'px';
             oDiv.style.top=t+'px';
              }

              document.onmouseup=function(ev)
              {
              document.onmousemove=null; //将move清除
              document.onmouseup=null;
              }                    
           }

           return false;  //ff chrome的bug,要阻止默认事件
        }
  }
  </script>

合并相同函数

  <script>
  window.onload=function()
  {
    var oDiv=document.getElementById('div1');
    var disX=0;
    var disY=0;

    //封装一个函数用于获取鼠标坐标
        function getPos(ev)
        {
           var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
           var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;  

           return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};     
        }


    //封装函数
        function moveEV(ev)
              {
             var oEvent=ev||event;
             var pos=getPos(oEvent);

             //防止div跑出可视框
             var l=pos.x-disX;
             var t=pos.y-disY;
             if(l<0)
             {
              l=0;
             }
             else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
             {
              l=document.documentElement.clientWidth-oDiv.offsetWidth;
             }

             if(t<0)
             {
              t=0;
             }
             else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
             {
              t=document.documentElement.clientHeight-oDiv.offsetHeight;
             }

             oDiv.style.left=l+'px';
             oDiv.style.top=t+'px';
              }

        function upEV(ev)
              {
              this.onmousemove=null; //将move清除
              this.onmouseup=null;

              if(oDiv.releaseCapture)
              {
                oDiv.releaseCapture();
              }

              }


        oDiv.onmousedown=function(ev)
        {
           var oEvent=ev||event;
           var pos=getPos(oEvent);  //获取鼠标坐标,比如pos.x表示鼠标横坐标

           disX=pos.x-oDiv.offsetLeft;
           disY=pos.y-oDiv.offsetTop;


           if(oDiv.setCapture)   //ie下
           {
              oDiv.onmousemove=moveEV;  

              oDiv.onmouseup=upEV;

              oDiv.setCapture();            
           }

           else    //ff下 chrome下
           {
              document.onmousemove=moveEV; 

              document.onmouseup=upEV;

           }

           return false;  //火狐的bug,要阻止默认事件
        }
  }
  </script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值