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 相关文章推荐
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
JS实现横向轮播图(初级版)
Jun 24 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/05/06 PHP
php在window iis的莫名问题的测试方法
2013/05/14 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
基于jQuery的history历史记录插件
2010/12/11 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
Python中多线程的创建及基本调用方法
2016/07/08 Python
Python遍历numpy数组的实例
2018/04/04 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
校长师德表现自我评价
2015/03/04 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS
在Python 中将类对象序列化为JSON
2022/04/06 Python
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python