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 相关文章推荐
判断是否输入完毕再激活提交按钮
Jun 26 Javascript
权威JavaScript 中的内存泄露模式
Aug 13 Javascript
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
JS的replace方法介绍
Oct 20 Javascript
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
javascript单张多张图无缝滚动实例代码
May 10 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 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实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
详解JavaScript树结构
2017/01/09 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
布同自制Python函数帮助查询小工具
2011/03/13 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
Python装饰器简单用法实例小结
2018/12/03 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
在django模板中实现超链接配置
2019/08/21 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
ASP.NET Core中的配置详解
2021/02/05 Python
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
迪拜航空官方网站:flydubai
2017/04/20 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
爱护草坪标语
2014/06/24 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
2014年路政工作总结
2014/12/10 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
商业计划书范文
2019/04/24 职场文书
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL