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工具库代码
Mar 29 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
angular6的响应式表单的实现
Oct 10 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 OPCode缓存 APC详细介绍
2010/10/12 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
PDO::inTransaction讲解
2019/01/28 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
测试你的JS的掌握程度的代码
2009/12/09 Javascript
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
js打造数组转json函数
2015/01/14 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
python计算两个地址之间的距离方法
2018/06/09 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
python re的findall和finditer的区别详解
2020/11/15 Python
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
C语言笔试题
2014/09/04 面试题
开会迟到检讨书
2014/01/08 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
会计岗位职责范本
2014/03/07 职场文书
大学生工作求职信
2014/06/23 职场文书
学校施工安全责任书
2015/01/29 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
导游词之日月潭
2019/11/05 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android