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 相关文章推荐
Jquery cookie操作代码
Mar 14 Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
jquery获取复选框被选中的值
Apr 10 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
原生js实现轮播图
Feb 27 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 Javascript
基于JavaScript获取url参数2种方法
Apr 17 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 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 insert语法详解
2008/06/07 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
js post提交调用方法
2014/02/12 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
私人房屋买卖协议书
2014/10/04 职场文书
2014年管理工作总结
2014/11/22 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
python套接字socket通信
2022/04/01 Python
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS