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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
jquery-easyui关闭tab自动切换到前一个tab
Jul 29 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 Javascript
搭建vscode+vue环境的详细教程
Aug 31 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+mysql写的简单留言本实例代码
2008/07/25 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
php处理复杂xml数据示例
2016/07/11 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
jquery判断浏览器类型的代码
2012/11/05 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
python ---lambda匿名函数介绍
2019/03/13 Python
python 实现识别图片上的数字
2019/07/30 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
服装设计专业毕业生推荐信
2013/11/09 职场文书
小学生自我评价范文
2014/01/25 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
房屋委托书范本
2014/04/04 职场文书
文明工地标语
2014/06/16 职场文书
班级出游活动计划书
2014/08/15 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书