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 相关文章推荐
JavaScript中URL编码函数代码
Jan 11 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
再谈JavaScript线程
Jul 10 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
JS原型与继承操作示例
May 09 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
python负载均衡的简单实现方法
2018/02/04 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
利用python开发app实战的方法
2019/07/09 Python
实例代码讲解Python 线程池
2020/08/24 Python
pandas针对excel处理的实现
2021/01/15 Python
python元组拆包实现方法
2021/02/28 Python
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
几个数据库方面的面试题
2016/07/01 面试题
string = null 和string = ''的区别
2013/04/28 面试题
销售高级职员求职信
2013/10/29 职场文书
药学专业个人自我评价
2013/11/11 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
党员年终个人总结
2015/02/14 职场文书
倡议书范文大全
2015/04/28 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技