工作需要写的一个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 相关文章推荐
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
浅谈JavaScript字符串拼接
Jun 25 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
AngularJs中$cookies简单用法分析
May 30 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
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
详解Python中列表和元祖的使用方法
2015/04/25 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
python微信撤回监测代码
2019/04/29 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
极简的HTML5模版
2015/07/09 HTML / CSS
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
Android面试题附答案
2014/12/08 面试题
2014两会学习心得:时代的发展
2014/03/17 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
党员示范岗材料
2014/12/19 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
Python OpenCV实现图形检测示例详解
2022/04/08 Python
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers