JS面向对象编程实现的拖拽功能案例详解

日期: 2020-06-22 17:44:48

本文实例讲述了JS面向对象编程实现的拖拽功能。分享给大家供大家参考，具体如下：

原始的面向过程代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      #box {
        width: 100px; 
        height: 100px; 
        background: blue; 
        position: absolute;
      }
    </style>
    <title>拖拽</title>
    <script>
      var oBox=null;
      var disX=0;
      var disY=0;
      
      window.onload=function(){
        oBox=document.getElementById('box');
        
        oBox.onmousedown=fnDown;
      };
      //鼠标按下事件
      function fnDown(ev){
        var oEvent = ev||event;
        disX = oEvent.clientX - oBox.offsetLeft;
        disY = oEvent.clientY - oBox.offsetTop;
        
        document.onmousemove = fnMove;
        document.onmouseup = fnUp;
      }
      //鼠标移动事件
      function fnMove(ev){
        var oEvent=ev||event;
        
        oBox.style.left = oEvent.clientX - disX + 'px';
        oBox.style.top = oEvent.clientY - disY + 'px';
      }
      //鼠标抬起事件
      function fnUp(){
        document.onmousemove = null;
        document.onmouseup = null;
      }
    </script>
  </head>
 
<body>
  <div id="box"></div>
</body>
</html>

下面是面向对象的代码

drag.js

/**
 * 拖拽
 * @param {Object} id div的id
 */
function Drag(id){
  this.oBox = document.getElementById(id);
  this.disX = 0;
  this.disY = 0;
  
  var _this = this;
  
  this.oBox.onmousedown = function(){
    _this.fnDown();
  }
}
//鼠标按下
Drag.prototype.fnDown = function(ev){
  var oEvent = ev || event;
  
  this.disX = oEvent.clientX - this.oBox.offsetLeft;
  this.disY = oEvent.clientY - this.oBox.offsetTop;
  
  var _this = this;
  
  document.onmousemove = function(){
    _this.fnMove();
  };
  document.onmouseup = function(){
    _this.fnUp();
  };
}
//鼠标移动
Drag.prototype.fnMove = function(ev){
  var oEvent= ev || event;
  
  this.oBox.style.left = oEvent.clientX - this.disX + 'px';
  this.oBox.style.top = oEvent.clientY - this.disY + 'px';
}
//鼠标抬起
Drag.prototype.fnUp = function(){
  document.onmousemove = null;
  document.onmouseup = null;
}

drag.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      div {
        position: absolute;
      }
    </style>
    <title>拖拽</title>
    <script type="text/javascript" src="../js/drag.js" ></script>
    <script>
      window.onload = function(){
        var drag1 = new Drag("box1");
        
        var drag1 = new Drag("box2");
      };
    </script>
  </head>
 
<body>
  <div id="box1" style="background: red;width: 200px;height: 200px;"></div>  
  <div id="box2" style="background: blue;width: 100px;height: 100px;"></div>
</body>
</html>

此拖拽有一个问题，就是没有控制拖拽出边界的问题。但我们又不想去修改代码，那我们怎么做？学过java的应该都知道可以写一个子类来做一些更加具体的操作，又保留了父类的功能，就是继承。

html

<script type="text/javascript" src="../js/drag.js" ></script>
<script type="text/javascript" src="../js/dragLimit.js" ></script>
<script>
  window.onload = function(){
     var drag1 = new Drag("box1");       
     var drag1 = new DragLimit("box2");//蓝色是不会超出边界的
  };
</script>
<body>
  <div id="box1" style="background: red;width: 200px;height: 200px;"></div>  
  <div id="box2" style="background: blue;width: 100px;height: 300px;"></div>
</body>

DragLimit.js：DragLimit继承自Drag，控制了不能出边界

/**
 * 限制边界的拖拽，继承自Drag
 * @param {Object} id
 */
function DragLimit(id){
  Drag.call(this, id);
}
//继承方法
for(var p in Drag.prototype){
  DragLimit.prototype[p] = Drag.prototype[p];
}
/**
 * 覆写父类的鼠标移动方法，控制不能移出边界
 */
DragLimit.prototype.fnMove = function(ev){
  var oEvent= ev || event;
  
  var left = oEvent.clientX - this.disX;
  var top = oEvent.clientY - this.disY;
  
  //控制边界
  if(left < 0){
    left = 0;
  } else if(left > document.documentElement.clientWidth-this.oBox.offsetWidth){
    left = document.documentElement.clientWidth-this.oBox.offsetWidth;
  }
  if(top <= 0){
    top = 0;
  } else if(top > document.documentElement.clientHeight-this.oBox.offsetHeight){
    top = document.documentElement.clientHeight-this.oBox.offsetHeight;
  }
  
  this.oBox.style.left = left + 'px';
  this.oBox.style.top = top + 'px';
}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：微信浏览器左上角返回按钮监听的实现

下一篇：JS面向对象编程——ES6 中class的继承用法详解