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选择器计算table中的某一列某一行的合计
Aug 13 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
VsCode插件整理(小结)
Sep 14 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 Javascript
在react中使用vue的状态管理的方法示例
May 02 Javascript
react antd实现动态增减表单
Jun 03 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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
php获取错误信息的方法
2015/07/17 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
jquery提升性能最佳实践小结
2010/12/06 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
js实现动态时钟
2020/03/12 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
Python中的多重装饰器
2015/04/11 Python
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
python实现将文本转换成语音的方法
2015/05/28 Python
python中abs&map&reduce简介
2018/02/20 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
python在每个字符后添加空格的实例
2018/05/07 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
需求分析说明书
2014/05/09 职场文书
作息时间调整通知
2015/04/22 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python