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 相关文章推荐
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
Angular.JS中指令ng-if的注意事项小结
Jun 21 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
Angular Material Icon使用详解
Nov 07 Javascript
JS实现图片切换效果
Nov 17 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 Javascript
一篇文章学会Vue中间件管道
Jun 20 Vue.js
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
重置版战役片段
2020/04/09 魔兽争霸
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
网站上面有这种切换效果
2006/06/26 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
python实现对csv文件的列的内容读取
2018/07/04 Python
python实现字符串和数字拼接
2020/03/02 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
python 模块导入问题汇总
2021/02/01 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
资深财务管理人员自我评价
2013/09/22 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
美术教师个人工作总结
2015/02/06 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
2015年毕业生实习评语
2015/03/25 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis