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 相关文章推荐
JS target与currentTarget区别说明
Aug 28 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
easyui-datagrid开发实践(总结)
Aug 02 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 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 基本语法格式
2009/12/15 PHP
php实现的发送带附件邮件类实例
2014/09/22 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
javascript 写类方式之六
2009/07/05 Javascript
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
python编程实现归并排序
2017/04/14 Python
python基础教程项目二之画幅好画
2018/04/02 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
python实现局域网内实时通信代码
2019/12/22 Python
python环境下安装opencv库的方法
2020/03/05 Python
苹果香港官方商城:Apple香港
2016/09/14 全球购物
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
网络编辑岗位职责范本
2014/02/10 职场文书
企业员工培训感言
2014/02/26 职场文书
品牌推广策划方案
2014/05/28 职场文书
法人任命书范本
2014/06/04 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
护士自荐信怎么写
2015/03/06 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
Pygame Rect区域位置的使用(图文)
2021/11/17 Python
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android
mysql全面解析json/数组
2022/07/07 MySQL
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android