js最简单的拖拽效果实现代码


Posted in Javascript onSeptember 24, 2010

其实对于弹出层而言,拖拽最初的目的很单纯,就是为了通过拉开层,使被弹出层挡住的内容可见,(当然,后来关于拖拽的功能不断被优化,使得拖拽的应用有了别的意义,最典型的如igoogle的自定义首页,通过拖放的形式满足用户自定义想要的内容模块顺序和位置)。

本文讨论的重点不是iGoogle的拖放效果,那属于进阶篇,本文是拖拽的“第一阶”,如题,实现最简单的拖拽。
这里的“最简单”即不考虑多个拖拽层的堆叠顺序,不考虑拖拽范围限制,不考虑类似iGoogle的“dragTo”的效果等等。。。

恩,废话不多说了,先给大家看个实例吧:

拖我试试...
content...点此-->打开 由于我是直接在页面上内嵌的所有代码,加上博客园第三方插件的原因,代码执行效率高,有可能运行起来不是很流畅

拖拽其实就涉及的鼠标的三个事件,onmousedown,onmouseup,onmousemove,再结合获取鼠标的位置以及层的left和top即可实现类似的效果。

在编码的时候,有两个需要注意的地方,一个是获取当前样式,currentStyle只在ie下有效,故对于非ie我们可以通过getComputedStyle实现(当然,对于这种需要获取的属性不是很多的情况,您也可以直接用obj.style[key]来获取您当前想要的属性值)

function getStyle(o,key){return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,null)[key]}//'currentStyle' only for ie5.0+

另一个点就是在获取鼠标位置时要用到event,event这个东西很奇怪,ie下是局部变量,moz内核下是全局变量(说法不准确,只是便于理解),所以在获取鼠标位置时候要对event做个判断
bar.onmousedown = function(e){ 
e = e?e:window.event; //'event' ie下局部变量,ff下全局变量 
params.isDrag = true; 
params._X = e.clientX; params._Y = e.clientY; 
};

恩,注意以上两点,结合正确的思路其实就可以了,并不难,下面提供参考代码:
function getStyle(o,key){return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,null)[key]}//'currentStyle' only for ie5.0+ var drag = function(bar, target){ 
var params = { 
startLeft:0, 
startTop:0, 
_X:0, 
_Y:0, 
isDrag:false 
}; 
if(getStyle(target,'left') != 'auto'){params.startLeft = getStyle(target,'left')} 
if(getStyle(target,'top') != 'auto'){params.startTop = getStyle(target,'top')} 
bar.onmousedown = function(e){ 
e = e?e:window.event; //'event' ie下局部变量,ff下全局变量 
params.isDrag = true; 
params._X = e.clientX; params._Y = e.clientY; 
}; 
document.onmouseup = function(){ 
params.isDrag = false; 
if(getStyle(target,'left') != 'auto'){params.startLeft = getStyle(target,'left')} 
if(getStyle(target,'top') != 'auto'){params.startTop = getStyle(target,'top')} 
}; 
document.onmousemove = function(e){ 
var e = e?e:window.event; 
if(params.isDrag){ 
var curX = e.clientX, curY = e.clientY, desL = curX-params._X+parseInt(params.startLeft), desT = curY-params._Y+parseInt(params.startTop); 
target.style['left'] = desL>=0?desL + 'px':0; 
target.style['top'] = desT>=0?desT + 'px':0; 
} 
} 
};

恩,至此,本文差不多可以结束了,关于类似的iGoogle的拖拽进阶篇,有时间会继续的,下面结合拖拽举个综合弹出层的例子,

不设任何options参数的box(默认高200px,宽300px)
无遮罩的box
这个弹出层插件是我在上文中就提到的,而且还提供了源文件下载,在此只是加上了拖动效果而已
ps:由于代码高亮插件的原因,遮罩层上会有白色小方块,暂没做处理。。。

Javascript 相关文章推荐
javascript学习笔记(五)正则表达式
Apr 08 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
在Javascript中 声明时用"var"与不用"var"的区别
Apr 15 Javascript
ExtJS DOM元素操作经验分享
Aug 28 Javascript
js中的eventType事件及其浏览器支持性介绍
Nov 29 Javascript
script标签属性用type还是language
Jan 21 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 #Javascript
IE无法设置短域名下Cookie
Sep 23 #Javascript
Javascript中获取出错代码所在文件及行数的代码
Sep 23 #Javascript
基于JQuery的一个简单的鼠标跟随提示效果
Sep 23 #Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 #Javascript
通过DOM脚本去设置样式信息
Sep 19 #Javascript
javscript对象原型的一些看法
Sep 19 #Javascript
You might like
PHP中date()日期函数有关参数整理
2011/07/19 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
JS中捕获console.log()输出的方法
2015/04/16 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
AngularJS中transclude用法详解
2016/11/03 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
selenium+python环境配置教程详解
2019/05/28 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
学习Python列表的基础知识汇总
2020/03/10 Python
python三引号如何输入
2020/07/06 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
2015年党风廉政建设责任书
2015/01/29 职场文书
长城导游词
2015/01/30 职场文书
运动会观后感
2015/06/09 职场文书
初中政治教师教学反思
2016/02/23 职场文书