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 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
JS动态图片的实现方法完整示例
Jan 13 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实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
javascript之更有效率的字符串替换
2008/08/02 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
Django与遗留的数据库整合的方法指南
2015/07/24 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
自考自我鉴定范文
2013/10/30 职场文书
校园创业策划书
2014/01/14 职场文书
年度考核自我鉴定
2014/02/02 职场文书
绿色环保标语
2014/06/12 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
民主生活会主持词
2015/07/01 职场文书