js实现拖拽效果


Posted in Javascript onFebruary 12, 2015

首先来了解一下,面向对象练习的基本规则和问题:

先写出普通的写法,然后改成面向对象写法项
普通方法变形

·尽量不要出现函数嵌套函数
·可以有全局变量
·把onload函数中不是赋值的语句放到单独函数中

改成面向对象

·全局变量就是属性
·函数就是方法
·onload中创建对象
·改this指针问题

先把拖拽效果的布局完善好:
HTML结构:

<div id="box"></div>

csc样式:
#box{position: absolute;width: 200px;height: 200px;background: red;}

第一步,首先把面向过程的拖拽回顾一下

window.onload = function (){

    // 获取元素和初始值

    var oBox = document.getElementById('box'),

        disX = 0, disY = 0;

    // 容器鼠标按下事件

    oBox.onmousedown = function (e){

        var e = e || window.event;

        disX = e.clientX - this.offsetLeft;

        disY = e.clientY - this.offsetTop;

        document.onmousemove = function (e){

            var e = e || window.event;

            oBox.style.left = (e.clientX - disX) + 'px';

            oBox.style.top = (e.clientY - disY) + 'px';

        };

        document.onmouseup = function (){

            document.onmousemove = null;

            document.onmouseup = null;

        };

        return false;

    };

};

第二步,把面向过程改写为面向对象

window.onload = function (){

    var drag = new Drag('box');

    drag.init();

};

// 构造函数Drag

function Drag(id){

    this.obj = document.getElementById(id);

    this.disX = 0;

    this.disY = 0;

}

Drag.prototype.init = function (){

    // this指针

    var me = this;

    this.obj.onmousedown = function (e){

        var e = e || event;

        me.mouseDown(e);

        // 阻止默认事件

        return false;

    };

};

Drag.prototype.mouseDown = function (e){

    // this指针

    var me = this;

    this.disX = e.clientX - this.obj.offsetLeft;

    this.disY = e.clientY - this.obj.offsetTop;

    document.onmousemove = function (e){

        var e = e || window.event;

        me.mouseMove(e);

    };  

    document.onmouseup = function (){

        me.mouseUp();

    }

};

Drag.prototype.mouseMove = function (e){

    this.obj.style.left = (e.clientX - this.disX) + 'px';

    this.obj.style.top = (e.clientY - this.disY) + 'px';

};

Drag.prototype.mouseUp = function (){

    document.onmousemove = null;

    document.onmouseup = null;

};

第三步,看看代码有哪些不一样

首页使用了构造函数来创建一个对象:

// 构造函数Drag

function Drag(id){

    this.obj = document.getElementById(id);

    this.disX = 0;

    this.disY = 0;

}

遵守前面的写好的规则,把全局变量都变成属性!

然后就是把函数都写在原型上面:

Drag.prototype.init = function (){

};

Drag.prototype.mouseDown = function (){

};

Drag.prototype.mouseMove = function (){

};

Drag.prototype.mouseUp = function (){

};

先来看看init函数:

Drag.prototype.init = function (){

    // this指针

    var me = this;

    this.obj.onmousedown = function (e){

        var e = e || event;

        me.mouseDown(e);

        // 阻止默认事件

        return false;

    };

};

我们使用me变量来保存了this指针,为了后面的代码不出现this指向的错误

接着是mouseDown函数:

Drag.prototype.mouseDown = function (e){

    // this指针

    var me = this;

    this.disX = e.clientX - this.obj.offsetLeft;

    this.disY = e.clientY - this.obj.offsetTop;

    document.onmousemove = function (e){

        var e = e || window.event;

        me.mouseMove(e);

    };  

    document.onmouseup = function (){

        me.mouseUp();

    }

};

改写成面向对象的时候要注意一下event对象。因为event对象只出现在事件中,所以我们要把event对象保存变量,然后通过参数传递!

后面的mouseMove函数和mouseUp函数就没什么要注意的地方了!

要注意的问题

关于this指针的问题,面向对象里面this特别重要!
this拓展阅读:
http://div.io/topic/809

关于event对象的问题,event对象只出现在事件里面,所以写方法的时候要注意一下!

Javascript 相关文章推荐
jquery 按键盘上的enter事件
May 11 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
JS中substring与substr的用法
Nov 16 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
VUE实现图片验证码功能
Nov 18 Javascript
js实现旋转的星空效果
Nov 01 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
jQuery多个input求和的实现方法
Feb 12 #Javascript
JQuery实现防止退格键返回的方法
Feb 12 #Javascript
JavaScript自定义数组排序方法
Feb 12 #Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 #Javascript
后台获取ZTREE选中节点的方法
Feb 12 #Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 #Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 #Javascript
You might like
php提取字符串中网站url地址的方法
2014/12/03 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
老生常谈Python序列化和反序列化
2017/06/28 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
20行python代码实现人脸识别
2019/05/05 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
Python中实现输入一个整数的案例
2020/05/03 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
python搜索算法原理及实例讲解
2020/11/18 Python
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
建筑专业自我鉴定
2013/10/22 职场文书
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
学生会招新策划书
2014/02/14 职场文书
学生安全责任书
2014/04/15 职场文书
外贸业务员求职信
2014/06/16 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python