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 相关文章推荐
解密效果
Jun 23 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
vue 解决循环引用组件报错的问题
Sep 06 Javascript
vue debug 二种方法
Sep 16 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
Vue.js路由实现选项卡简单实例
Jul 24 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
编写自己的php扩展函数
2006/10/09 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
深入解析ES6中的promise
2018/11/08 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
django1.8使用表单上传文件的实现方法
2016/11/04 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
python dlib人脸识别代码实例
2019/04/04 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
使用Python实现牛顿法求极值
2020/02/10 Python
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
送给程序员的20个Java集合面试问题
2014/08/06 面试题
社区党员先进事迹
2014/01/22 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
民事代理词范文
2015/05/25 职场文书
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers