js实现可拖动DIV的方法


Posted in Javascript onDecember 17, 2013

随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系。现在微软的windows8 系统的App都可以用js开发了,大家有时间可以去尝试一下。

     现在切入正题,说一下js 实现可拖动Div.实现这个功能我们先说一下思路:

     1.捕捉鼠标div的mousedown事件

     2.捕捉 document的   mousemove事件

     3.取消事件

然后我们看一下代码:

function Drag(id) {
            var $ = function (flag) {
                return document.getElementById(flag);
            }
            $(id).onmousedown = function (e) {
                var d = document;
                var page = {
                    event: function (evt) {
                        var ev = evt || window.event;
                        return ev;
                    },
                    pageX: function (evt) {
                        var e = this.event(evt);
                        return e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);
                    },
                    pageY: function (evt) {
                        var e = this.event(evt);
                        return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);
                    },
                    layerX: function (evt) {
                        var e = this.event(evt);
                        return e.layerX || e.offsetX;
                    },
                    layerY: function (evt) {
                        var e = this.event(evt);
                        return e.layerY || e.offsetY;
                    }
                }             
                var x = page.layerX(e);
                var y = page.layerY(e);        
                if (dv.setCapture) {
                    dv.setCapture();
                }
                else if (window.captureEvents) {
                    window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                }
                d.onmousemove = function (e) {                    
                    var tx = page.pageX(e) - x;
                    var ty = page.pageY(e) - y;
                    dv.style.left = tx + "px";
                    dv.style.top = ty + "px";
                }
                d.onmouseup = function () {
                    if (dv.releaseCapture) {
                        dv.releaseCapture();
                    }
                    else if (window.releaseEvents) {
                        window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                    }
                    d.onmousemove = null;
                    d.onmouseup = null;
                }
            }
        }

代码分析:

1.

获取div对象

var $ = function (flag) {
                return document.getElementById(flag);
            }    

2.捕捉document的mousedown事件:

里面有这么一段代码:

     var page = {
                    event: function (evt) {
                        var ev = evt || window.event;
                        return ev;
                    },
                    pageX: function (evt) {
                        var e = this.event(evt);
                        return e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);
                    },
                    pageY: function (evt) {
                        var e = this.event(evt);
                        return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);
                    },
                    layerX: function (evt) {
                        var e = this.event(evt);
                        return e.layerX || e.offsetX;
                    },
                    layerY: function (evt) {
                        var e = this.event(evt);
                        return e.layerY || e.offsetY;
                    }
                }

其中event获取鼠标事件,pageX,pageY获取鼠标的坐标,layerX,layerY获取鼠标距离div边框的距离。

还有一段代码:

             if (dv.setCapture) {
                    dv.setCapture();
                }
                else if (window.captureEvents) {
                    window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                }

这个就是捕捉div的MouseMove和MouseUp事件,不懂得tx可以到网上查查。
3. document的MouseMove和mouseUp事件:
d.onmousemove = function (e) {                    
                    var tx = page.pageX(e) - x;
                    var ty = page.pageY(e) - y;
                    dv.style.left = tx + "px";
                    dv.style.top = ty + "px";
                }   
                d.onmouseup = function () {
                    if (dv.releaseCapture) {
                        dv.releaseCapture();
                    }
                    else if (window.releaseEvents) {
                        window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                    }
                    d.onmousemove = null;
                    d.onmouseup = null;
                }

其中的tx,ty就是最重要的代码了,是设置div坐标的

有的人可能会问为什么要-x,-y?

x,y其实就是获取鼠标距离div边框的距离,如果不减掉的话

鼠标箭头的坐标和div的x,y坐标一样了,这样拖动之后,鼠标的位置会偏到左上角,效果就是,拖动之后会弹动一下。

                if (dv.releaseCapture) {
                        dv.releaseCapture();
                    }
                    else if (window.releaseEvents) {
                        window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                    }
                    d.onmousemove = null;
                    d.onmouseup = null;

上面这段代码就是在鼠标松开之后取消document的onmousemove,onmouseup事件。

最近都在学习js,后续有新的心得体会也会与大家分享,希望与大家共同学习,进步。

Javascript 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
JS中Location使用详解
May 12 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
npm全局环境变量配置详解
Dec 15 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 #Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 #Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 #Javascript
javascript确认框的三种使用方法
Dec 17 #Javascript
js 剪切板应用clipboardData详细解析
Dec 17 #Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 #Javascript
JavaScript禁止页面操作的示例代码
Dec 17 #Javascript
You might like
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
数据库查询记录php 多行多列显示
2009/08/15 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
Python中使用logging模块打印log日志详解
2015/04/05 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
python使用正则筛选信用卡
2019/01/27 Python
Python 切分数组实例解析
2019/11/07 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
thinkphp5 路由分发原理
2021/03/18 PHP
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
文案策划求职信
2014/03/18 职场文书
地球一小时活动总结
2015/02/27 职场文书
学生退学证明
2015/06/23 职场文书
入党申请书怎么写?
2019/06/11 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
进行数据处理的6个 Python 代码块分享
2022/04/06 Python
Redis入门基础常用操作命令整理
2022/06/01 Redis