js实现拖拽 闭包函数详细介绍


Posted in Javascript onNovember 25, 2012

js拖拽

采用简单的闭包实现方式

/** 
* Created with JetBrains WebStorm. 
* User: lsj 
* Date: 12-11-24 
* Time: 下午12:59 
* To change this template use File | Settings | File Templates. 
*/ 
var dragmanager=(function() 
{ 
//标识移动元素z轴坐标 
var index_z=1; 
//当前的拖拽元素 
var drganow; 
//移动标识符号 
var dragbegin=false; 
//鼠标点击时距离div左边距离 
var relativex=0; 
//鼠标点击时距离div上边距离 
var relativey=0; 
//标识鼠标是否移出 
var isout=false; 
return { 
/** 
* 为document绑定鼠标提起事件,主要防止鼠标移动过快跳出el区域 
*/ 
bingDocOnMouseUp:function() 
{ 
//注册全局的onmouseup事件,主要防止鼠标移动过快导致鼠标和el不同步 
document.onmouseup=function(e) 
{ 
var ev = window.event || e; 
if(isout && dragbegin) 
{ 
//改变div的相对位置 
drganow.style.left= (ev.clientX-relativex)+'px'; 
drganow.style.top=(ev.clientY-relativey)+'px'; 
drganow.style.cursor='normal'; 
dragbegin=false; 
isout=false; 
} 
} 
}, 
/** 
* 将注入的元素绑定事件 
* @param el 
*/ 
registerElementEv:function(element) 
{ 
element.onmousedown=function(e) 
{ 
var ev = window.event || e; 
var clientx=ev.clientX; 
var clienty= ev.clientY; 
var left= parseInt(this.style.left.substring(0, this.style.left.indexOf("p"))); 
var top= parseInt(this.style.top.substring(0, this.style.top.indexOf("p"))); 
relativex=clientx-left; 
relativey=clienty-top; 
index_z++; 
this.style.zIndex=index_z; 
drganow=this; 
dragbegin=true; 
} 
element.onmousemove=function(e) 
{ 
var ev = window.event || e; 
//开始拖拽 
if(dragbegin) 
{ 
//改变div的相对位置 
this.style.left= (ev.clientX-relativex)+'px'; 
this.style.top=(ev.clientY-relativey)+'px'; 
this.style.cursor='move'; 
} 
} 
element.onmouseout=function(e) 
{ 
isout=true; 
} 
element.onmouseup=function(e) 
{ 
var ev = window.event || e; 
if(dragbegin) 
{ 
//改变div的相对位置 
drganow.style.left= (ev.clientX-relativex)+'px'; 
drganow.style.top=(ev.clientY-relativey)+'px'; 
drganow.style.cursor='normal'; 
dragbegin=false; 
} 
} 
} 
} 
})();

1.采用闭包的形式实现 ,方便后期的维护,将移动过程所需的变量全部转移进gridmanager里面
2.拖拽过程中 鼠标移动过快导致移动元素跟不上鼠标的移动,所以要注册document.oumouseup事件,该事件的开关是有移动元素的onmouseout事件触发的
3.拖拽的过程中可能会触发浏览器自身的onmousemove的select事件,可以进行屏蔽ie下是onmousemove="document.selection.empty()"
Javascript 相关文章推荐
基于jQuery的实现简单的分页控件
Oct 10 Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 #Javascript
JavaScript mapreduce工作原理简析
Nov 25 #Javascript
jquery div 居中技巧应用介绍
Nov 24 #Javascript
js实现在文本框光标处添加字符的方法介绍
Nov 24 #Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 #Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 #Javascript
js 如何实现对数据库的增删改查
Nov 23 #Javascript
You might like
在同一窗体中使用PHP来处理多个提交任务
2006/10/09 PHP
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
python实现给字典添加条目的方法
2014/09/25 Python
Python抓取百度查询结果的方法
2015/07/08 Python
浅谈Python的文件类型
2016/05/30 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
Python 多线程实例详解
2017/03/25 Python
python如何让类支持比较运算
2018/03/20 Python
python 贪心算法的实现
2020/09/18 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
大学生找工作求职信
2014/07/09 职场文书
给朋友的赠语
2015/06/23 职场文书