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 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 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
PHP数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
php递归函数怎么用才有效
2018/02/24 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
python中的sort方法使用详解
2014/07/25 Python
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
分厂厂长岗位职责
2013/12/29 职场文书
装修致歉信
2014/01/15 职场文书
升学宴演讲稿
2014/09/01 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
护士辞职信怎么写
2015/02/27 职场文书
新闻稿怎么写
2015/07/18 职场文书
创业计划书之酒吧
2019/12/02 职场文书
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS