工作需要写的一个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 相关文章推荐
简单的JS多重继承示例
Mar 13 Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
Dec 15 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
jQuery中:header选择器用法实例
Dec 29 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 Javascript
JavaScript ES 模块的使用
Nov 12 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 JSON 数据解析代码
2010/05/26 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
PHP制作万年历
2015/01/07 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
javascript表单验证大全
2015/08/12 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
Python生成pdf文件的方法
2014/08/04 Python
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
韩语专业本科生求职信
2013/10/01 职场文书
2014新年寄语
2014/01/20 职场文书
实践单位评语
2014/04/26 职场文书
爬山的活动方案
2014/08/16 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android