前端技术分享-码匠 极客编程技术分享

您当前位于：JavaScript高级 ——> 面向对象系列-原型与继承案例实战，拖拽功能
上一篇：原生JavaScript setInterval与setTimeout参数详解 下一篇：原生JavaScript 代码的解析与运行（执行）机制

面向对象系列-原型与继承案例实战，拖拽功能

2015/05/05 11:36:46 | 作者：HTML5学堂（码匠） | 分类：JavaScript高级 | 关键词：JavaScript,面向对象,原型,继承,拖拽

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

HTML5学堂：本文当中，我将为大家介绍拖拽的面向对象写法以及继承的基本知识。首先，我们来书写一个拖拽的基本功能代码，然后使用面向对象的继承来实现不同功能的拖拽。

拖拽的基本功能代码

首先，我们来书写一个拖拽的基本功能代码，在此就不贴代码了，直接上代码截图（毕竟这个原版的拖拽不是我们这次要讲解的重点）
HTML5学堂 面向对象系列讲解——拖拽（继承知识）实战 h5course

面向对象拖拽

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

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

将函数进行提取，不允许出现嵌套的函数；修改为构造函数，为属性添加“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">
  9.     #warp{
  10.         border:8px yellow double;
  11.         width:400px;height:400px;
  12.         background:#ccc;
  13.         position:relative;
  14.         }
  15.     #sport{
  16.         border:5px yellow double;
  17.         width:50px;height:50px;
  18.         background:blue;
  19.         position:absolute;
  20.         top:0;left:0;
  21.         }
  22. </style>
  23. </head>
  24. <body>
  25.     <div id="warp">
  26.         <div id="sport">没有边界的拖拽-独行冰海</div>
  27.     </div>
  28.     
  29. <script type="text/javascript">
  30.     function Drag(id){
  31.         var _this = this;
  32.         this.sportX = null;
  33.         this.sportY = null;
  34.         this.sport = document.getElementById(id);
  35.         this.sport.onmousedown = function(event){
  36.             _this.dragStart(event);
  37.         }
  38.     }
  39.     Drag.prototype.dragStart = function(event){
  40.         var _this = this;
  41.         var event = event || window.event;
  42.         this.sportX = this.sport.offsetLeft - event.clientX;
  43.         this.sportY = this.sport.offsetTop - event.clientY;
  44.         event.preventDefault();
  45.         document.onmousemove = function(event){
  46.             _this.dragMove(event);        
  47.         }
  48.         document.onmouseup = _this.dragEnd;
  49.     }
  50.     Drag.prototype.dragMove = function(event){
  51.         var event = event || window.event;
  52.         this.sport.style.left = this.sportX + event.clientX + 'px';
  53.         this.sport.style.top = this.sportY + event.clientY + 'px';
  54.         event.preventDefault();
  55.     }
  56.     Drag.prototype.dragEnd = function(){
  57.         document.onmousemove = null;
  58.     }
  59.     new Drag('sport');
  60. </script>
  61. </body>
  62. </html>

欢迎沟通交流~HTML5学堂

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

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

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

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

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

上一篇：原生JavaScript setInterval与setTimeout参数详解 下一篇：原生JavaScript 代码的解析与运行（执行）机制