一个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 相关文章推荐
jquery $.each() 使用小探
Aug 23 Javascript
javascript列表框操作函数集合汇总
Nov 28 Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
基于vue.js无缝滚动效果
Jan 25 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 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
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
PHP中session变量的销毁
2014/02/27 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
python开发之list操作实例分析
2016/02/22 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
python3爬取torrent种子链接实例
2020/01/16 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
基于Python实现粒子滤波效果
2020/12/01 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
医校毕业生自我鉴定
2014/01/25 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
禁止酒驾标语
2014/06/25 职场文书
工作骂脏话检讨书
2014/10/05 职场文书