一个js拖拽的效果类和dom-drag.js浅析


Posted in Javascript onJuly 17, 2010

这是个功能非常简单的类,只实现了拖拽的功能,当然,代码也因此保持了原始的简洁,下面是这个类库的代码:
代码

/************************************************** 
* Drag.js 
* 作者:橡树小屋 07.17.2010 
* http://www.cnblogs.com/babyzone2004/ 
*用法:Drag.initDrag(id); id是标签的id名称 
**************************************************/ 
var Drag={ 
dragObject:null, 
mouseOffset:null, 
initDrag:function(item){ 
if(item){ 
this.item=document.getElementById(item); 
this.item.onmousedown=function(evnt){ 
document.onmousemove=Drag.mouseMove; 
document.onmouseup=Drag.mouseUp; 
Drag.dragObject=this; 
Drag.mouseOffset=Drag.getMouseOffset(this,evnt); 
return false; 
} 
} 
}, 
mousePoint:function(x,y){ 
this.x=x; 
this.y=y; 
}, 
mousePosition:function (evnt){ 
evnt=evnt||window.event; 
var x=parseInt(evnt.clientX); 
var y=parseInt(evnt.clientY); 
return new Drag.mousePoint(x,y); 
}, 
getMouseOffset:function(target,evnt){ 
var mousePos=Drag.mousePosition(evnt); 
var x=mousePos.x-target.offsetLeft; 
var y=mousePos.y-target.offsetTop; 
return new Drag.mousePoint(x,y); 
}, 
mouseUp:function (evnt){ 
Drag.dragObject=null; 
document.onmousemove = null; 
document.onmouseup = null; 
}, 
mouseMove:function(evnt){ 
if(!Drag.dragObject) return; 
var mousePos=Drag.mousePosition(evnt); 
Drag.dragObject.style.position="absolute"; 
Drag.dragObject.style.top=mousePos.y-Drag.mouseOffset.y+"px"; 
Drag.dragObject.style.left=mousePos.x-Drag.mouseOffset.x+"px"; 
return false; 
} 
}

由于代码不是很复杂,所以就不详细展开说了。有需要的可以直接下载使用,导入后用Drag.initDrag(id名称)方法就可以应用了。
事实上,网上已经有一个轻量级的dom-drag类库(作者: Aaron Boodman),回头看到自己写的类库,内牛满面……,dom-drag类可以到http://boring.youngpup.net/projects/dom-drag/下载,代码非常简单,而且提供了很多易用的特性。并且网站上提供了非常详细的例子。
这个类库就像flash里面的startDrag方法,代码精简却功能实用。你想让某个组件能够拖动,你可以调用 Drag.init( ) 方法。
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
o :是想现实鼠标拖动的组件;
oRoot : 是o上层的组件,将随o一起拖动;
minX, maxX, minY, maxY :设置鼠标拖动的范围, 由下面的例子cropper可以看出,如果有oRoot,那范围是由oRoot相对于页面来说的;
bSwapHorzRef, bSwapVertRef :设置组件的优先权;
fXMapper, fYMapper: 设置拖动的路径

其中第三个例子:
示例链接:http://boring.youngpup.net/projects/dom-drag/ex3.html
可以实现对拖动范围的限制,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<html> 
<head> 
<script language="javascript" src="dom-drag.js"></script> 
<style type="text/css"> 
#thumb { 
position:absolute; 
height:50px; 
width:12px; 
background-color:#eee; 
border:1px outset #eee; 
} 
</style> 
</head> 
<body> 
<div id="thumb" style="left:25px; top:25px;"></div> 
<script language="javascript"> 
var aThumb = document.getElementById("thumb"); 
Drag.init(aThumb, ff;">null, 25, 25, 25, 200); 
</script> 
</body> 
</html>

<script language="javascript">
var aThumb = document.getElementById("thumb");
Drag.init(aThumb, null, 25, 25, 25, 200);
</script>
init里面的4个数字参数对应元素可以拖动的区域,左上和右下的x,y坐标。因此元素只能在(25,25),(25,200)的直线之间滑动,就想滚动条一样。
这个类库功能简单,但如果结合其他功能,将可以做出像flash那么炫的效果。
演示代码: http://demo.3water.com/js/dom-drag/demo.html
代码打包: https://3water.com/jiaoben/28492.html
Javascript 相关文章推荐
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 Javascript
JavaScript 浏览器验证代码(来自discuz)
Jul 17 #Javascript
IE6,IE7下js动态加载图片不显示错误
Jul 17 #Javascript
js模拟类继承小例子
Jul 17 #Javascript
javascript 循环读取JSON数据的代码
Jul 17 #Javascript
一个可绑定数据源的jQuery数据表格插件
Jul 17 #Javascript
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 #Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 #Javascript
You might like
Zend公司全球首推PHP认证
2006/10/09 PHP
十天学会php之第十天
2006/10/09 PHP
理解php Hash函数,增强密码安全
2011/02/25 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
基于Python 函数和方法的区别说明
2021/03/24 Python
物业客服专员岗位职责
2013/11/30 职场文书
党支部书记先进事迹
2014/01/17 职场文书
综合实践活动方案
2014/02/14 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
摘录式读书笔记
2015/07/01 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
基于PyQt5制作一个群发邮件工具
2022/04/08 Python