js实现拖拽效果(构造函数)


Posted in Javascript onDecember 14, 2015

一、利用构造函数模式进行开发的优势

1、业务逻辑思路更清晰;

2、避免了大量全局变量的产生,只有一个全局变量,相当于就是这一功能模块向外暴露的唯一接口;

      3、如果结合模块化开发,很方便就可以把自定义的模块加到统一modules中,只要自定义的模块名不冲突,使用起来也不会互相干扰;

      4、代码可维护性好,利人利己;

二、下面就利用这一模式,以拖拽为实例,进行讲解。
1、html,如下:

<body>
<div class="box" id="box1"><div class="main"><div class="bar">拖拽区</div><div class="content">内容区块</div></div></div>

<div class="box" id="box2"><div class="main"><div class="bar">拖拽区</div><div class="content">内容区块</div></div></div>

<div class="box" id="box3"><div class="main"><div class="bar">拖拽区</div><div class="content">内容区块</div></div></div>
</body>

2、css

<style type="text/css">
  .box{position:absolute;left:100px;top:100px;padding: 5px;box-shadow:2px 2px 4px #666666; font-size:12px;}
  #box2{left:500px;}
  #box3{left:900px; }
  .main{border:1px solid #a0b3d6;background-color: #fff; }
  .bar{line-height:24px;padding-left:5px;border-bottom:1px solid #a0b3d6;background-color:#beceeb;cursor:move;}
  .content{padding: 10px 5px;height:200px;width:250px;}
</style>

3、js

// 定义Drag构造函数,并设置每个实例的特权属性(也就是将来要创建的每个实例对象私有的属性);
function Drag(bar, target) {
  // 此处的bar是指触发拖拽事件的对象;
  this.bar = bar;

  // 此处的target是值实际上被拖动的对象;
  this.target = target;

  // 这个flag相当于是一个开关,用于判断事件是否能够执行;
  this.flag = false;
}
// 构造函数原型上添加方法,也是为其实例添加公用方法公用方法;
Drag.prototype = {
  // 重新声明原型的constructor属性,也就是为实例指定正真的创建者;这里不重新指定也没问题,就是为了。。。
  constructor : Drag,

  // 初始化每个实例的属性,为绑定事件做好准备;
  init : function(){
    // 这边的this其实是指调用这个init函数方法的那个对象,也就是我们所创建的实例;
    // 这么写有好处,代码执行到绑定事件那一块再详细的讲;
    var temp = this;

    // 获取实例对象上最先设定的样式值,这边就是left和top属性;
    temp.left = temp.getCss(temp.target, "left");
    temp.top = temp.getCss(temp.target, "top");

    // 预先声明下面要用的到值,这边是指储存鼠标点下去的瞬间鼠标相对于屏幕的位置(clientX、clientY)
    temp.mousePosX = null;
    temp.mousePosY = null;

    // 发出为实例对象绑定事件的命令;
    temp.bindEvent();
  },
  //
  getCss : function(o , prop){
    // Dom对象的style属性指向的对象只能获得嵌入式样式的值,比如<a style="..."></a>,这种写在元素内部的可以获得;
    // 但是通过外联样式表和内联样式表设置的样式值,只能通过以下方法获得,currentStyle对应的是Ie,另一个对应的是其他浏览器;
    return o.currentStyle ? o.currentStyle[prop] : document.defaultView.getComputedStyle(o, null)[prop];
  },
  bindEvent : function(){
    // 先把调用这个bindEvent方法的this对象(也就是我们创建的实例对象)传递给temp变量,于是temp也就指向了实例对象;
    // 因此,在当前函数的执行环境内,想要调用这个实例对象,而不必要使用this了,因为此时的this可能指向的其他的对象;
    // 比如,在为某个对象绑定事件的时候,这个事件内部的this肯定是指向绑定的对象的,而不是我们想要的最开始的那个“this”
    var temp = this;

    // 监听鼠标点下的事件函数
    temp.bar.onmousedown = function(e){
      // 这边的e是指事件对象,老Ie不能直接使用,得通过window.event来引用;
      e = e || window.event;

      // 点下的瞬间就把这个开关打开,表明现在可以拖动了;
      temp.flag = true;

      // 获取鼠标相对与浏览器窗口的位置,并且赋值给实例对象的mousePos属性;
      temp.mousePosX = e.clientX;
      temp.mousePosY = e.clientY;
    };

    // 监听鼠标移动事件,注意这个绑定到document对象上的事件,因为鼠标在整个文档上移动;
    // 这边不能用onmousemove方法绑定事件,因为我们的实例可能有多个,如果用次方法,最后初始化的那个实例才绑定到事件函数;
    document.addEventListener('mousemove' ,function(e){
      e = e || window.event;

      // 因为在鼠标点下的时候,已经指定flag为true了,所以下面的代码才会执行;
      // 如果没有这个开关控制,我们移动鼠标的时候,我们创建的实例对象都要移动;
      if(temp.flag){

        // (e.clientX - temp.mousePosX)代表了鼠标自按下后滑动的距离;
        // parseInt(temp.left)是指鼠标还没滑动时,被拖动对象的初始位置;
        temp.target.style.left = parseInt(temp.left) + e.clientX - temp.mousePosX + "px";
        temp.target.style.top = parseInt(temp.top) + e.clientY - temp.mousePosY + "px";
      }
    });

    // 鼠标放开后事件
    document.addEventListener('mouseup', function(e){
      // 鼠标放开后,就把这个开关了,就说明拖动对象不能被拖动了;
      temp.flag = false;

      // 记录被拖动对象的被拖动后的位置
      temp.left = temp.getCss(temp.target, "left");
      temp.top = temp.getCss(temp.target, "top");
    });
  }
}

// 获取Dom元素,oBar是指拖动条,oBox是指实际上拖拽对象;
var oBox = document.getElementsByClassName('box');
var oBar = document.getElementsByClassName('bar');
// 创建实例对象,注意参数顺序;
var drag1 = new Drag(oBar[0], oBox[0]);
var drag2 = new Drag(oBar[1], oBox[1]);
var drag3 = new Drag(oBar[2], oBox[2]);
// 调用实例对象上的init方法,为实例对象指定设计好的操作流程;
drag1.init();
drag2.init();
drag3.init();

具体的过程都通过js注释说明了,希望能够帮助大家更好地利用构造函数实现拖拽效果。

Javascript 相关文章推荐
深入理解JavaScript定时机制
Oct 29 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
基于javascript编写简单日历
May 02 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
jQuery滚动加载图片实现原理
Dec 14 #Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 #Javascript
jquery实现倒计时效果
Dec 14 #Javascript
JavaScript 七大技巧(一)
Dec 13 #Javascript
JavaScript 七大技巧(二)
Dec 13 #Javascript
js自定义回调函数
Dec 13 #Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 #Javascript
You might like
PHP 和 MySQL 基础教程(三)
2006/10/09 PHP
php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
PHP的基本常识小结
2013/07/05 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
html5使用canvas画一条线
2014/12/15 HTML / CSS
html5唤起app的方法
2017/11/30 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
有模特经验的简历自我评价
2013/09/19 职场文书
医药专业推荐信
2013/11/15 职场文书
法律六进活动方案
2014/03/13 职场文书
灵山大佛导游词
2015/02/04 职场文书
学校运动会简讯
2015/07/20 职场文书
优秀员工演讲稿
2019/06/21 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技