盒子移动的问题，拖拽问题

先来看一个简单的例子，5个盒子在页面中，实现盒子的移动

在css 中设置样式，

<style>
    div{
        width: 200px;
        height:200px;
        border: 1px solid #FF0000;
        position: absolute;
    }
    div:nth-child(1){
        top:0;
        left:0;
    }
    div:nth-child(2){
        top:200px;
        left:0;
    }
    div:nth-child(3){
        top:400px;
        left:0;
    }
    div:nth-child(4){
        top:600px;
        left:0;
    }
    div:nth-child(5){
        top:800px;
        left:0;
    }
</style>

　　在body中

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

　　在js中

<script>
    class Drag{
        constructor(selector){
            this.eles=document.querySelectorAll(selector);
            this.startDrag();
        }
        startDrag() {
            for (var i = 0; i < this.eles.length; i++) {
                var that = this;
                this.eles[i].onmousedown = function (e) {
                    //console.log(this);
                    var left = this.offsetLeft;
                    var top = this.offsetTop;
                    var cx = e.clientX;
                    var cy = e.clientY;
                    that.lenx = cx - left;
                    that.leny = cy - top;
                    //console.log(that);
                    that.move(this);
                    //console.log(that);
                    that.up();
                }
            }
        }
            move(obj){
                var that=this;
                document.onmousemove=function (e) {
                    var cx=e.clientX;
                    var cy=e.clientY;
                    obj.style.left=cx-that.lenx+"px";
                    obj.style.top=cy-that.leny+"px";
                }
            }
            up(){
                document.onmouseup=function () {
                    document.onmousemove=null;
                    document.onmouseup=null;
                }
            }
    }

    window.onload=function () {
        new Drag("div");
    }
</script>

　　看看经典的盒子拖拽的问题，一个盒子的运动，并且当鼠标停止时，可以出现缓动

<style>
.parent{
   width: 800px;
   height: 600px;
   border:1px solid #000;
   position: absolute;
   left: 0;right: 0;top:0;bottom: 0;
   margin: auto;
}
.son{
   width: 100px;
   height: 100px;
   background: red;
   position: absolute;
}
</style>

<body>
   <div class="parent">
       <div class="son"></div>
   </div>
</body>

　　面向对象的方式

<script>
//面向对象
 class drag{
    constructor(selector){
    	 this.eles=document.querySelectorAll(selector);
        this.starDrag();
    }
    starDrag(){
    	  var that=this;
       for(var i=0;i<this.eles.length;i++){
          this.eles[i].onmousedown=function(e){
          	that.left=this.offsetLeft;
          	that.top=this.offsetTop;
          	that.cx=e.clientX;
          	that.cy=e.clientY;
          	that.lenx=that.cx-that.left;
          	that.leny=that.cy-that.top;
          	that.move(this);
          	that.up();
          }
       }
    }
    move(obj){
    	  var that=this;
    	  document.onmousemove=function(e){

    	     that.cx=e.clientX;
    	     that.cy=e.clientY;
    	     obj.style.left=that.cx-that.lenx+"px";
    	     obj.style.top=that.cy-that.leny+"px";
    	  }
    }
    up(){
    	  document.onmouseup=function(){
    	  	document.onmousemove=null;
    	    document.onmouseup=null;
    	  }
    }
 }
 new drag("div");
</script>

　　面向过程

<script>
function drag(obj){
   this.obj=obj.ele;
   this.minx=obj.rect.minx;
   this.maxx=obj.rect.maxx;
   this.miny=obj.rect.miny;
   this.maxy=obj.rect.maxy;
   this.dirx=obj.dir.x===false? obj.dir.x:true;
   this.diry=obj.dir.y===false? obj.dir.y:true;
   this.yizi=0.8;
   this.prex=0;
   this.prey=0;
   this.nextx=0;
   this.nexty=0;
   this.down();
}
drag.prototype={
   down:function(){
      var that=this;
      this.obj.onmousedown=function(e){
         var left=this.offsetLeft;
         var top=this.offsetTop;
         var cx=e.clientX;
         var cy=e.clientY;
         that.x=cx-left;
         that.y=cy-top;
         that.move();
         that.up();
      }
   },
   move:function(){
      var that=this;
      document.onmousemove=function(e){
         var cx=e.clientX;
         var cy=e.clientY;
         var left=cx-that.x;
         var top=cy-that.y;
         if(left<that.minx){left=that.minx};
         if(left>that.maxx-that.obj.offsetWidth){left=that.maxx-that.obj.offsetWidth};
         if(top<that.miny){top=that.miny};
         if(top>that.maxy-that.obj.offsetHeight){top=that.maxy-that.obj.offsetHeight};
         if(that.dirx){
            that.obj.style.left=left+"px";
         }
         if(that.diry){
            that.obj.style.top=top+"px";
         }  
         that.nextx=left;
         that.nexty=top;
         that.lenx=that.nextx-that.prex;
         that.leny=that.nexty-that.prey;
         that.prex=that.nextx;
         that.prey=that.nexty;
      }
   },
   up:function(){
      document.onmouseup=()=>{
          document.onmousemove=null;
          document.onmouseup=null;
          this.animate();
      }
   },
   animate:function(){
      var t=setInterval(()=>{
         this.lenx*=this.yizi;
         this.leny*=this.yizi;
         var x=this.lenx+this.obj.offsetLeft;
         var y=this.leny+this.obj.offsetTop;

         if(x<this.minx){x=this.minx};
         if(x>this.maxx-this.obj.offsetWidth){x=this.maxx-this.obj.offsetWidth};
         if(y<this.miny){y=this.miny};
         if(y>this.maxy-this.obj.offsetHeight){y=this.maxy-this.obj.offsetHeight};

         if(Math.abs(this.lenx)>=Math.abs(this.leny)){
              if(Math.abs(this.lenx)<=1){
                  clearInterval(t);
              }
         }else{
              if(Math.abs(this.leny)<=1){
                  clearInterval(t);
              }
         }
         if(this.dirx){
            this.obj.style.left=x+"px";
         }
         if(this){
            this.obj.style.top=y+"px";
         }
      },60)
   }
}
var son=document.querySelector(".son");
new drag({ele:son,rect:{minx:0,maxx:800,miny:0,maxy:600},dir:{x:true,y:true}})
</script>

posted @ 2017-03-02 13:11 张一昕阅读(855) 评论(0) 收藏举报

张一昕

盒子移动的问题，拖拽问题

公告