js 实现拖拽

JavaScript基础入门学习，实现移动拖拽。适合新手学习和参考。不足之处希望大神提出你宝贵的意见。

一：实现简单的拖拽

二：实现浏览器的兼容性。在拖拽的过程中不会超出屏幕，当你拖拽物体放在那里，就是那里。如果放在右下角，缩小屏幕是，物体不会被遮罩。

实现效果：

一、简单的实现拖拽

一 界面设计

 

 

二 设计效果

       由于我们弹窗的遮罩我们采用了clientWidth和clientHeight,导致如果有滚动条，拖出的部分就会出现空白，我们可以尝试使用offset或者scroll获取实际或滚动条区域的内容进行遮罩，或者直接弹窗后直接去掉滚动条，禁止拖动即可。

document.documentElement.style.overflow='hidden';//禁止滚动条 document.documentElement.style.overflow='auto';//还原默认滚动条

 

       如果要设置物体拖拽，那么必须使用三个事件：mousedown, mousemove, mouseup这三个

 

1.直接写拖拽事件

Ø  拖拽流程

Ø  1.先点击鼠标

Ø  2.在点击下的物体被选中，进行move移动

Ø  3.抬起鼠标时，停止移动

Ø  4.点击某个物体，用moveDIv即可，move和up是全局区域，也就是整个页面通用，用过用document

//找到移动拖拽的区域（id获取）     var moveDiv=document.getElementById('login');     //实现一个鼠标按下效果     moveDiv.onmousedown=function(){          //拖动鼠标          document.onmousemove=function(e){              //浏览器兼容性              var e=e||window.event;              //获取X抽的位置              moveDiv.style.left=e.clientX+'px';              //获取Y抽的位置              moveDiv.style.top=e.clientY+'px';          };          document.onmouseup=function(){//放开鼠标事件              document.onmousemove=null;//清除鼠标移动事件              document.onmouseup=null;//清除鼠标向上事件          };     };

 

备注：实现了拖动 但是 目前还存在一个为题。就是当鼠标按下移动时，鼠标会自动跳到右上角的点，而不是你鼠标按下的位置。

 

2.进一步完善拖拽事件

//找到移动拖拽的区域（id获取）     var moveDiv=document.getElementById('login');     moveDiv.onmousedown=function(e){//鼠标按下事件         //浏览器的兼容性 主要是火狐浏览器         var e = e || window.event;         var dX=e.clientX-moveDiv.offsetLeft;         var dY=e.clientY-moveDiv.offsetTop;         //拖动鼠标         document.onmousemove=function(e){             //浏览器兼容性             var e=e||window.event;             //获取X抽的位置             moveDiv.style.left=e.clientX-dX+'px';             //获取Y抽的位置             moveDiv.style.top=e.clientY-dY+'px';           };         document.onmouseup=function(){//放开鼠标事件             document.onmousemove=null;//清除鼠标移动事件             document.onmouseup=null;//清除鼠标向上事件         };     };

 

 

3.封装浏览器兼容并调用

//找到移动拖拽的区域（id获取）     var moveDiv=document.getElementById('login');     moveDiv.onmousedown=function(e){//鼠标按下事件         var e = getEvent(e);//调用封装的对象window.event||e         //_this==moveDiv         var _this=this;         var dX=e.clientX-_this.offsetLeft;         var dY=e.clientY-_this.offsetTop;         //拖动鼠标         document.onmousemove=function(e){             //浏览器兼容性             var e=getEvent(e);//调用封装的对象window.event||e             //获取X抽的位置             _this.style.left=e.clientX-dX+'px';             //获取Y抽的位置             _this.style.top=e.clientY-dY+'px';           };         document.onmouseup=function(){//放开鼠标事件             //this==document             this.onmousemove=null;//清除鼠标移动事件             this.onmouseup=null;//清除鼠标向上事件         };     };

 

3.1封装getEvent

//获取event对象 function getEvent(event){     return window.event||event; }

 

3.2封装整个拖拽事件

//封装拖拽事件 Base.prototype.drag=function(){     for(var i=0; i<this.elements.length;i++){//遍历         this.elements[i].onmousedown=function(e){//鼠标按下事件         var e = getEvent(e);//调用封装的对象window.event||e         //_this==moveDiv         var _this=this;         var dX=e.clientX-_this.offsetLeft;         var dY=e.clientY-_this.offsetTop;         //拖动鼠标         document.onmousemove=function(e){             //浏览器兼容性             var e=getEvent(e);//调用封装的对象window.event||e             //获取X抽的位置             _this.style.left=e.clientX-dX+'px';             //获取Y抽的位置             _this.style.top=e.clientY-dY+'px';           };         document.onmouseup=function(){//放开鼠标事件             //this==document             this.onmousemove=null;//清除鼠标移动事件             this.onmouseup=null;//清除鼠标向上事件         };      };            }     return this;//返回再次调用 否则只能调用一次 };

 

4.调用拖拽事件（完成）

login.drag();//物体对象 调用拖拽事件

 

 

 

 

 

 

 

二、  主要是讲拖拽的一些问题进行修复

一 界面设计

二 设置效果

1.问题一：低版本的火狐在空的div拖拽时，有个bug，会拖段掉并且无法拖动，这个问题是火狐的默认行为，我们只需要取消这个默认行为即可解决这个bug。

1.1. 阻止默认行为

//阻止默认事件(跨浏览器) function preDef(event){        var e=getEvent(event);        if(typeof e.preventDefault!=='undefined'){//W3C标准               e.preventDefault();        }else{//IE               e.returnValue=false;        } }

2.问题二：弹出窗口被拖出浏览器的边缘会导致很多问题，比如出现滚动条，比如出现空白等，不利于输入等。所以，我们需要将其规定在可见的区域。

//解决空白和滚动条问题 //判断如果左边的距离为零 就不能拖出去 if(left<0){//判断（小于零就不能被拖出去）     left=0; }else if(left>getInner().width-_this.offsetWidth){      left=getInner().width-_this.offsetWidth; } //判断山下的距离 if(top<0){//判断（小于零就不能被拖出去）     top=0; }else if(top>getInner().height-_this.offsetHeight){     top=getInner().height-_this.offsetHeight; }

 

3.问题三：IE浏览器在拖拽出浏览器外部的时候，还会出现空白，这个bug是IE独有的，我们需要阻止这种行为。

       IE浏览器有两个独有的方法：setcapture，releaseCapture，这两方法，可以让鼠标滑动到浏览器外部也可以捕获到事件，而我们的bug就是当鼠标移除浏览器的时候，限制超过的功能就消失。

鼠标锁住时触发（点击住）

//解决IE的bug鼠标释放时触发（放开鼠标）                      if(typeof _this.releaseCapture!='undefined'){                             _this.releaseCapture()                      }

 

鼠标释放时触发（放开鼠标）

//解决IE的bug鼠标释放时触发（放开鼠标）                      if(typeof _this.releaseCapture!='undefined'){                             _this.releaseCapture()                      }

 

4.问题四：当我们改变浏览器大小的时候，弹窗会自动水平垂直居中，而使用了拖拽效果后，改变浏览器大小，还是会水平居中，这样的用户体验就不是很好，我们需要的是等当拖到哪里。就是哪里，但拖放到右下角，然后又缩放时，还嫩全部显示出来。

//触发浏览器窗口事件 Base.prototype.resize=function(fn){        for(var i=0; i<this.elements.length;i++){               var element=this.elements[i];               window.onresize=function(){                      fn();                      if(element.offsetLeft>getInner().width-element.offsetWidth){                             element.style.left=getInner().width-element.offsetWidth+'px';                      }                      if(element.offsetTop>getInner().height-element.offsetHeight){                             element.style.top=getInner().height-element.offsetHeight+'px';                      }               };        }        return this; };

5.完成

window.onload=function(){        //个人中心        //找到该区域实现鼠标移入移除方法        var info=$().getClass('centerInfo');        info.hover(function(){                      //添加鼠标移入改变的样式                      info.css('background','url(images/s2.png) no-repeat 70px center').addClass('a');                      $().getTagName('ul').show();//显示               },function(){                      //添加鼠标移入返回原来的样式                      info.css('background','url(images/s1.png) no-repeat 70px center').css('color','#000');                      $().getTagName('ul').hide();//隐藏               });                      //登录        //设置物体居中、触发浏览器事件        var login=$().getId('login');        var screen=$().getId('screen');        login.center(350,250).resize(function(){               if(login.css('display')==='block'){//登录弹框打开时才执行锁屏                      screen.lock();               }        });        //点击事件 打开关闭        $().getClass('logBtn').click(function(){               login.css('display','block');               screen.lock();        });        $().getClass('close').click(function(){               login.css('display','none');               screen.unlock();        });               //拖拽        login.drag();        };

 

6.封装的拖拽事件drag();

//封装拖拽事件 Base.prototype.drag=function(){        for(var i=0; i<this.elements.length;i++){//遍历               this.elements[i].onmousedown=function(e){//鼠标按下事件               preDef(e);//组织默认行为               var e = getEvent(e);//调用封装的对象window.event||e               //_this==moveDiv               var _this=this;               var dX=e.clientX-_this.offsetLeft;               var dY=e.clientY-_this.offsetTop;               //解决IE浏览器的bug鼠标锁住时触发（点击住）               if(typeof _this.setCapture!='undefined'){                      _this.setCapture();               }               //拖动鼠标               document.onmousemove=function(e){                      //浏览器兼容性                      var e=getEvent(e);//调用封装的对象window.event||e                      var left=e.clientX-dX;//左边的距离                      var top=e.clientY-dY;//上边的距离                      //解决空白和滚动条问题                      //判断如果左边的距离为零 就不能拖出去                      if(left<0){//判断（小于零就不能被拖出去）                             left=0;                      }else if(left>getInner().width-_this.offsetWidth){                             left=getInner().width-_this.offsetWidth;                      }                      //判断山下的距离                      if(top<0){//判断（小于零就不能被拖出去）                             top=0;                      }else if(top>getInner().height-_this.offsetHeight){                             top=getInner().height-_this.offsetHeight;                      }                      //获取X抽的位置                      _this.style.left=left+'px';                      //获取Y抽的位置                      _this.style.top=top+'px';                                    };               document.onmouseup=function(){//放开鼠标事件                      //this==document                      this.onmousemove=null;//清除鼠标移动事件                      this.onmouseup=null;//清除鼠标向上事件                      //解决IE的bug鼠标释放时触发（放开鼠标）                      if(typeof _this.releaseCapture!='undefined'){                             _this.releaseCapture()                      }               };         };                                      }        return this;//返回再次调用 否则只能调用一次 };