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


Posted in Javascript onMarch 03, 2020

本文实例讲述了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>

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

此拖拽有一个问题,就是没有控制拖拽出边界的问题。但我们又不想去修改代码,那我们怎么做?学过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.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
javaScript实现一个队列的方法
Jul 14 Javascript
序列化模块json代码实例详解
Mar 03 #Javascript
JS常用排序方法实例代码解析
Mar 03 #Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 #Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 #Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 #Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 #Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
Mar 03 #Javascript
You might like
PHP 作用域解析运算符(::)
2010/07/27 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
深入解析php中的foreach函数
2013/08/31 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
PHP 实现缩略图
2021/03/09 PHP
javascript继承之为什么要继承
2012/11/10 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
python实现函数极小值
2019/07/10 Python
python 标准差计算的实现(std)
2019/07/29 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
仓库理货员岗位职责
2013/12/18 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
工作保证书范文
2014/04/29 职场文书
家属答谢词
2015/01/05 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
工作经历证明范本
2015/06/15 职场文书
四年级数学教学反思
2016/02/16 职场文书
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
浅析Python中的随机采样和概率分布
2021/12/06 Python
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python