工作需要写的一个js拖拽组件


Posted in Javascript onJuly 28, 2011
/* 
*使用方法: 
* var d = new Drag({id:'dragPannel',maxLeft:500,maxTop:200}); 
* d.ready(); 
*请注意: 
* 拖动对象的left和top样式必须写在其style属性里边 
* 
*/ 
//矫正调用者。将 fn 作为 newObj 的方法调用 
function repairCaller(newObj, fn){ 
return function(){ 
return fn.apply(newObj, arguments); 
} 
} 
function Drag( config ){ 
this.moveTarget = T.dom.get( config.id ); 
this.startLeft = parseInt(this.moveTarget.style.left); //每次拖动开始时被拖动对象的 left,top 
this.startTop = parseInt(this.moveTarget.style.top); 
this.startClientX = this.startLeft; //保存拖动开始时事件的 clientX, clientY 
this.startClientY = this.startTop; 
this.MAX_LEFT = config.maxLeft||document.documentElement.clientWidth - this.moveTarget.offsetWidth; //元素可以移动的最大范围 
this.MAX_TOP = config.maxTop||document.documentElement.clientHeight - this.moveTarget.offsetHeight; 
this.lock = true; 
} 
Drag.prototype.ready = function(){ 
//绑定事件 
T.bind(document, "mousedown", repairCaller(this,this.down)); 
T.bind(document, "mousemove", repairCaller(this,this.move)); 
T.bind(document, "mouseup", repairCaller(this,this.stop)); 
} 
Drag.prototype.down = function(){ 
//取得事件对象 
var event = T.event.getEvent(arguments[0]), 
target = T.event.getTarget(event); 
if (target == this.moveTarget){ 
this.lock = false; 
//在事件开始时保存各种坐标位置 
this.startLeft = parseInt(this.moveTarget.style.left); 
this.startTop = parseInt(this.moveTarget.style.top); 
this.startClientX = event.clientX; 
this.startClientY = event.clientY; 
} 
}; 
Drag.prototype.move = function(){ 
if(!this.lock ){ 
//取得事件对象 
var event = T.event.getEvent(arguments[0]), 
target = T.event.getTarget(event); 
if(target == this.moveTarget){ 
//如有选择内容,清除之 
//window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); 
//凑数拖动范围有没超过最大限制 
var realLeft = this.startLeft + event.clientX - this.startClientX, //实际的移动范围 
realTop = this.startTop + event.clientY - this.startClientY, 
rightLeft , rightTop; //正确的 left, top 取值 
rightLeft = realLeft > this.MAX_LEFT ? this.MAX_LEFT : ( realLeft > 0 ? realLeft : 0 ); 
rightTop = realTop > this.MAX_TOP ? this.MAX_TOP : ( realTop > 0 ? realTop : 0 ); 
this.moveTarget.style.left = rightLeft + "px"; 
this.moveTarget.style.top = rightTop + "px"; 
} 
else{ 
this.lock = true; 
} 
} 
}; 
Drag.prototype.stop = function(){ 
this.lock = true 
};

后记:
在写的过程中非常需要注意的几点是:
1、拖动层的 position、left 和 top 必须写在 style 里
2、移动过程中设置 left 和 top 要带单位,否则不起作用
3、多级 div 嵌套时需要给父 div 加 over-flow:hidden 样式
完毕!
Javascript 相关文章推荐
asp.net HttpHandler实现图片防盗链
Nov 09 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
JS实现电商商品展示放大镜特效
Jan 07 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 #Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 #Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 #Javascript
另一个javascript小测验(代码集合)
Jul 27 #Javascript
jsTree 基于JQuery的排序节点 Bug
Jul 26 #Javascript
Jquery中显示隐藏的实现代码分析
Jul 26 #Javascript
jquery attr 设定src中含有&(宏)符号问题的解决方法
Jul 26 #Javascript
You might like
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
zend framework重定向方法小结
2016/05/28 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
Django基础之Model操作步骤(介绍)
2017/05/27 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
Python数据类型之List列表实例详解
2019/05/08 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
自荐书范文
2013/12/08 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
学校招生宣传广告词
2014/03/19 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
关于的python五子棋的算法
2022/05/02 Python