一个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实现多级下拉菜单的实例代码
Oct 02 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
javascript操作css属性
Dec 30 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
jquery 判断selection range 是否在容器中的简单实例
Aug 02 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
javascript代码简写的几种常用方式汇总
Aug 23 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/11/25 PHP
php分页函数示例代码分享
2014/02/24 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
Python实现的knn算法示例
2018/06/14 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
python实现经典排序算法的示例代码
2021/02/07 Python
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
绿色城市实施方案
2014/03/19 职场文书
团支部建设方案
2014/05/02 职场文书
文员求职信
2014/07/15 职场文书
学校周年庆活动方案
2014/08/22 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
2014年英语教学工作总结
2014/12/17 职场文书