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 相关文章推荐
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
如何用JavaScript实现动态修改CSS样式表
May 20 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 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
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
分页栏的web标准实现
2011/11/01 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
Python人脸识别初探
2017/12/21 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
Python datetime包函数简单介绍
2019/08/28 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
作文评语集锦
2014/12/25 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
离婚民事起诉状
2015/08/03 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python