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入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
读取input:file的路径并显示本地图片的方法
Sep 23 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
Augularjs-起步详解
Jul 08 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
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
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
Python实现基于HTTP文件传输实例
2014/11/08 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
python利用线程实现多任务
2020/09/18 Python
python3中celery异步框架简单使用+守护进程方式启动
2021/01/20 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
高职助产应届生自荐信
2013/09/24 职场文书
在校大学生的职业生涯规划书
2014/03/14 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
react antd实现动态增减表单
2021/06/03 Javascript
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android