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 相关文章推荐
javascript offsetX与layerX区别
Mar 12 Javascript
js打印纸函数代码(递归)
Jun 18 Javascript
javascript初学者常用技巧
Sep 02 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
JS原生实现轮播图的几种方法
Mar 23 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中使用XML
2006/10/09 PHP
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
Javascript 入门基础学习
2010/03/10 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
Python中处理时间的几种方法小结
2015/04/09 Python
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
python和php哪个更适合写爬虫
2020/06/22 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
生产车间主任的个人自我鉴定
2013/10/25 职场文书
历史专业毕业生的自我鉴定
2013/11/15 职场文书
玩具公司的创业计划书
2013/12/31 职场文书
yy司仪主持词
2014/03/22 职场文书
迎新晚会主持词
2014/03/24 职场文书
师德师风自我评价范文
2014/09/11 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
2016年中秋祝酒词
2015/11/26 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python