工作需要写的一个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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
javascript之可拖动的iframe效果代码
Aug 01 Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
node thread.sleep实现示例
Jun 20 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 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
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
学习使用PHP数组
2006/10/09 PHP
php中的常用魔术方法总结
2013/08/02 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
Javascript继承机制详解
2017/05/30 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python迭代器与生成器详解
2016/03/10 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
用Python实现数据的透视表的方法
2018/11/16 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
应届大学生求职信
2013/12/01 职场文书
致800米运动员广播稿
2014/02/16 职场文书
单位未婚证明范本
2014/11/25 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
PyTorch中permute的使用方法
2022/04/26 Python