一个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 相关文章推荐
js禁止小键盘输入数字功能代码
Aug 01 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
es6基础学习之解构赋值
Dec 10 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 Javascript
js闭包的9个使用场景
Dec 29 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中的超全局变量
2006/10/09 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
python使用心得之获得github代码库列表
2014/06/25 Python
python元组操作实例解析
2014/09/23 Python
python中self原理实例分析
2015/04/30 Python
python制作图片缩略图
2019/04/30 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
python django model联合主键的例子
2019/08/06 Python
Python列表元素常见操作简单示例
2019/10/25 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
和平主题的演讲稿
2014/01/12 职场文书
德育标兵事迹材料
2014/08/24 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python