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 相关文章推荐
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
js Math 对象的方法
Sep 01 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
VUE动态生成word的实现
Jul 26 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获取当前页面完整URL的实现代码
2013/06/10 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
今天是星期几的4种JS代码写法
2013/09/17 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
原生js实现轮播图
2017/02/27 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
下载官网python并安装的步骤详解
2019/10/12 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
如果NULL定义成#define NULL((char *)0)难道不就可以向函数传入不加转换的NULL了吗
2012/02/15 面试题
高中升旗仪式主持词
2015/07/03 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL
关于vue-router-link选择样式设置
2022/04/30 Vue.js
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript