zoukankan      html  css  js  c++  java
  • 用js面向对象写拖拽

    function Drag(id){
    var _this = this; //首先把this存起来,是为了下面的方法的面向对象会有this的指向问题.
    
    this.id = id;
    this.disX = 0;//用来存储鼠标按下时,鼠标和拖拽元素的左上角的水平距离
    this.disY = 0;//用来存储鼠标按下时,鼠标和拖拽元素的左上角的垂直距离
    this.oDiv = document.getElementById(this.id);
    this.oDiv.onmousedown = function(ev){
      _this.fnDown(ev);
    }
    
    }
    
    Drag.prototype.fnDown = function(ev){
      this.down(ev);
    };
    
    Drag.prototype.down = function(ev){
      var _this = this;
    
      var e = ev || event;
    
    if (this.oDiv.setCapture) {
    this.oDiv.setCapture();
    } 
    
    this.disX = e.clientX - this.oDiv.offsetLeft;
    this.disY = e.clientY - this.oDiv.offsetTop;
    
    document.onmousemove = function(ev){
    
    _this.fnMove(ev);
    
    };
    
    document.onmouseup = function(){
      _this.fnUp();    
    };
    return false; //阻止默认行为.
    
    }
    
    
    Drag.prototype.fnMove = function(ev){
    
    var e = ev || event;
    
    this.SetCapture();
    var l = e.clientX - this.disX;
    var t = e.clientY - this.disY;
    this.oDiv.style.left = l +"px";
    this.oDiv.style.top = t + "px";
    };
    
    Drag.prototype.SetCapture = function(){
    if (this.oDiv.setCapture) {
      this.oDiv.setCapture();//针对IE低版本拖拽的bug,事件捕获.
    }    
    };
    
    Drag.prototype.fnUp = function(ev){
    
    document.onmousemove = null;
    document.onmouseup = null; // 
    this.ReleaseCapture(); 
    
    };
    
    Drag.prototype.ReleaseCapture = function(){
    if (this.oDiv.releaseCapture) {
      this.oDiv.releaseCapture();//鼠标抬起的时候,释放捕获.
    }
    
    };
    
    当然,记得把拖拽的元素设置为position:absolute;必须脱离文档流.
    
    接下来,我们可以根据Drag这个为基类,扩展拖拽.
    
    //限制范围的拖拽
    
    function LimitDrag(id,canleId){
    this.drag = Drag;//对象冒充的方法实现继承
    this.drag(id); //这里必须得调用一下,(当然也可以用其它的继承方式.)
    }
    
    for(var i in Drag.prototype){
      LimitDrag.prototype[i] = Drag.prototype[i];    
    }
    LimitDrag.prototype.fnMove = function(e){
    this.SetCapture();
    this.fnLimit(e);
    }
    LimitDrag.prototype.fnLimit = function(e){
    var e = e || window.event;
    
    var l = e.clientX - this.disX;
    var t = e.clientY - this.disY;
    
    if(l < 0){ //拖拽的元素不能出屏幕的左侧
    
    l = 0;    
    }
    else if( l > document.documentElement.clientWidth - this.oDiv.offsetWidth){
    
    //拖拽的元素不能出屏幕的右侧
    
    l = document.documentElement.clientWidth - this.oDiv.offsetWidth;
    }
    if(t < 0){
    t = 0;    //拖拽的元素不能出屏幕的上侧 
    }
    else if(t > document.documentElement.offsetHeight - this.oDiv.offsetHeight){
    
     //拖拽的元素不能出屏幕的下侧
    t = document.documentElement.offsetHeight - this.oDiv.offsetHeight;
    }
    
    this.oDiv.style.left = l +"px";
    this.oDiv.style.top = t + "px";
    }
    
    当然还可以在这个限制范围的拖拽的基础上再扩展,比如,拖拽完后做一个回调.子元素的拖拽控制父元素的拖拽.
  • 相关阅读:
    [ Algorithm ] N次方算法 N Square 动态规划解决
    [ Algorithm ] LCS 算法 动态规划解决
    sql server全文索引使用中的小坑
    关于join时显示no join predicate的那点事
    使用scvmm 2012的动态优化管理群集资源
    附加数据库后无法创建发布,error 2812 解决
    浅谈Virtual Machine Manager(SCVMM 2012) cluster 过载状态检测算法
    windows 2012 r2下安装sharepoint 2013错误解决
    sql server 2012 数据引擎任务调度算法解析(下)
    sql server 2012 数据引擎任务调度算法解析(上)
  • 原文地址:https://www.cnblogs.com/web-xuchang/p/3579717.html
Copyright © 2011-2022 走看看