一个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 相关文章推荐
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
详解Vue前端对axios的封装和使用
Apr 01 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 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
对盗链说再见...
2006/10/09 PHP
PHP 字符串操作入门教程
2006/12/06 PHP
PHP 采集程序 常用函数
2008/12/18 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
Javascript之String对象详解
2016/06/08 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[00:10]神之谴戒
2019/03/06 DOTA
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
pandas 层次化索引的实现方法
2019/07/06 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
市场营销毕业求职信
2014/08/07 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
医院护士工作检讨书
2014/10/26 职场文书
具结保证书范本
2015/05/11 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS