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下高性能字符串连接StringBuffer类
Aug 16 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
灵活使用数组制作图片切换js实现
Jul 28 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
javascript中的面向对象
Mar 30 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
JS canvas实现画板和签字板功能
Feb 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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
JavaScript如何操作css
2020/10/24 Javascript
python进阶教程之文本文件的读取和写入
2014/08/29 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
python requests库的使用
2021/01/06 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
最新自我评价范文
2013/11/16 职场文书
保护野生动物倡议书
2014/05/16 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
六五普法心得体会2016
2016/01/21 职场文书
比较node.js和Deno
2021/04/27 Javascript
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
详解JS数组方法
2021/11/20 Javascript