javascript面向对象系列讲解之拖拽（继承知识）实战



javascript面向对象系列讲解之拖拽（继承知识）实战  。声明：为了方便大家学习和查看，所以特意控制了文章的篇幅，将面向对象写成了多篇连续博文的方式，也方便大家根据自己具体情况进行选择性的学习

在上一篇文章当中，我们讲解了面向对象的Tab切换书写方法，本文当中，我将为大家介绍拖拽的面向对象写法以及继承的基本知识。

首先，我们来书写一个拖拽的基本功能代码，在此就不贴代码了，直接上代码截图（毕竟这个原版的拖拽不是我们这次要讲解的重点）

面向对象系列讲解——拖拽（继承知识）实战 - 独行冰海 - 独行冰海

 

注意：这个拖拽是没有条件限制的拖拽

接下来按照我们上一篇文章中讲过的处理方法进行处理：

将函数进行提取，不允许出现嵌套的函数；修改为构造函数，为属性添加“this.”，把方法提取出来，利用原型进行书写。

提示一下，在代码的书写过程中，要需要注意两点，防止出现问题。

第一，this的使用

第二，在一个函数当中进行另一个函数的调用时，记得使用function(){}进行包装


成品代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset=”utf-8″/>
  5.     <title>拖拽div-面向对象-独行冰海</title>
  6.     <meta name=”keywords” content=”"/>
  7.     <meta name=”description” content=”"/>
  8. <style type=”text/css”>
  10.     #warp{
  11.         border:8px yellow double;
  12.         width:400px;height:400px;
  13.         background:#ccc;
  14.         position:relative;
  15.         }
  17.     #sport{
  18.         border:5px yellow double;
  19.         width:50px;height:50px;
  20.         background:blue;
  21.         position:absolute;
  22.         top:0;left:0;
  23.         }
  24. </style>
  25. </head>
  26. <body>
  27.     <div id=”warp”>
  28.         <div id=”sport”>没有边界的拖拽-独行冰海</div>
  29.     </div>
  31. <script type=”text/javascript”>
  32.     function Drag(id){
  33.         var _this = this;
  34.         this.sportX = null;
  35.         this.sportY = null;
  36.         this.sport = document.getElementById(id);
  37.         this.sport.onmousedown = function(event){
  38.             _this.dragStart(event);
  39.         }
  40.     }
  41.     Drag.prototype.dragStart = function(event){
  42.         var _this = this;
  43.         var event = event || window.event;
  44.         this.sportX = this.sport.offsetLeft – event.clientX;
  45.         this.sportY = this.sport.offsetTop – event.clientY;
  46.         event.preventDefault();
  47.         document.onmousemove = function(event){
  48.             _this.dragMove(event);
  49.         }
  50.         document.onmouseup = _this.dragEnd;
  51.     }
  52.     Drag.prototype.dragMove = function(event){
  53.         var event = event || window.event;
  54.         this.sport.style.left = this.sportX + event.clientX + ‘px’;
  55.         this.sport.style.top = this.sportY + event.clientY + ‘px’;
  56.         event.preventDefault();
  57.     }
  58.     Drag.prototype.dragEnd = function(){
  59.         document.onmousemove = null;
  60.     }
  61.     new Drag(‘sport’);
  62. </script>
  63. </body>
  64. </html>

接下来说说用继承实现限制的拖拽：

当我们已经能够实现没有限制的拖拽的时候，如果需要我们实现有边界的限制拖拽，相信很少有人愿意从头到尾再重新书写一个。于是，就有了所谓的“继承”。从“父级”将父级的功能全部获取下来，然后稍加改动，就形成了拥有更强大功能的函数。

那么如何实现有限制的拖拽效果呢，使用继承的几个基本步骤又是什么呢？

1、利用call的方法进行属性的继承；

2、利用for-in循环的方式继承原来的所有方法；

3、重新书写和上面不同的内容。

具体代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset=”utf-8″/>
  5.     <title>拖拽div-面向对象-独行冰海</title>
  6.     <meta name=”keywords” content=”"/>
  7.     <meta name=”description” content=”"/>
  8. <style type=”text/css”>
  10.     #warp{
  11.         border:8px yellow double;
  12.         width:400px;height:400px;
  13.         background:#ccc;
  14.         position:relative;
  15.     }
  17.     #sport{
  18.         position:absolute;
  19.         top:0;left:0;
  20.         width:50px;height:50px;
  21.         border:5px yellow double;
  22.         background:blue;
  23.     }
  24.     #limitsport{
  25.         position:absolute;
  26.         top:0;left:0;
  27.         width:50px;height:50px;
  28.         border:5px yellow double;
  29.         background:#cfc;
  30.     }
  31. </style>
  32. </head>
  33. <body>
  34.     <div id=”warp”>
  35.         <div id=”sport”>普通拖拽-独行冰海</div>
  36.         <div id=’limitsport’>限制拖拽-独行冰海</div>
  37.     </div>
  39. <script type=”text/javascript”>
  40.     function Drag(id){
  41.         var _this = this;
  42.         this.sportX = null;
  43.         this.sportY = null;
  44.         this.sport = document.getElementById(id);
  45.         this.sport.onmousedown = function(event){
  46.             _this.dragStart(event);
  47.         }
  48.     }
  49.     Drag.prototype.dragStart = function(event){
  50.         var _this = this;
  51.         var event = event || window.event;
  52.         this.sportX = this.sport.offsetLeft – event.clientX;
  53.         this.sportY = this.sport.offsetTop – event.clientY;
  54.         event.preventDefault();
  55.         document.onmousemove = function(event){
  56.             _this.dragMove(event);
  57.         }
  58.         document.onmouseup = _this.dragEnd;
  59.     }
  60.     Drag.prototype.dragMove = function(event){
  61.         var event = event || window.event;
  62.         this.sport.style.left = this.sportX + event.clientX + ‘px’;
  63.         this.sport.style.top = this.sportY + event.clientY + ‘px’;
  64.         event.preventDefault();
  65.     }
  66.     Drag.prototype.dragEnd = function(){
  67.         document.onmousemove = null;
  68.     }
  70.     new Drag(‘sport’);
  71.     // 需要进行继承
  72.     // 创建构造
  73.     function LimitDrag(id, limId){
  74.         Drag.call(this, id);    // 继承属性
  75.         this.warp = document.getElementById(limId);
  76.     }
  77.     // 继承方法
  78.     for(var i in Drag.prototype){
  79.         LimitDrag.prototype[i] = Drag.prototype[i];
  80.     }
  82.     new LimitDrag(‘limitsport’, ‘warp’);
  84.     // 在基础上面进行不同内容的重新书写，即DragMove方法
  85.     LimitDrag.prototype.dragMove = function(){
  86.         var event = event || window.event;
  87.         var nowX = this.sportX + event.clientX;
  88.         var nowY = this.sportY + event.clientY;
  89.         var redconX = this.warp.clientWidth – this.sport.offsetWidth;
  90.         var redconY = this.warp.clientHeight – this.sport.offsetHeight;
  92.         if(nowX >= redconX){
  93.             nowX = redconX;
  94.         }
  95.         if(nowX <= 0){
  96.             nowX = 0;
  97.         }
  98.         if(nowY >= redconY){
  99.             nowY = redconY;
  100.         }
  101.         if(nowY <= 0){
  102.             nowY = 0;
  103.         }
  104.         this.sport.style.left = nowX + ‘px’;
  105.         this.sport.style.top = nowY + ‘px’;
  106.         event.preventDefault();
  107.     }
  108. </script>
  109. </body>
  110. </html>

到此为止，面向对象系列的基本知识就全部讲完了，感谢大家的支持。