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 相关文章推荐
两个SUBMIT按钮,如何区分处理
Aug 22 Javascript
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
jquery 新浪网易的评论块制作
Jul 01 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
WebPack基础知识详解
Jan 16 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
webpack打包优化的几个方法总结
Feb 10 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+mysql删除指定编号员工信息的方法
2015/01/14 PHP
Javascript 汉字字节判断
2009/08/01 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
JS实现留言板功能
2017/06/17 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
大学专科生推荐信范文
2013/11/23 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
撤诉状格式范本
2015/05/19 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
工作经历证明范本
2015/06/15 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技