一、一些无关痛痒的唠叨

拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义。例如:
①浏览器标签顺序的拖拽切换
现在基本上所有的选项卡式的浏览器都有顺序拖拽切换的功能,如下图:

类似的效果我们可以在QQ精要新闻弹出框中看到,见下图:

②把内容放在自己喜欢的位置上
这个在桌面软件上见到的最多,比如视频播放器,Adobe系列软件(CS3+)等。

在web页面上,我们也会见到拖拽效果,但是,一般不会太复杂。例如iGoogle(点击这里访问)://zxx:域名已经不是点cn结尾,而是点com点hk

或是我最近经常使用的新浪微博,其弹出层是可以拖拽的,与人人,或是QQ邮箱的弹出层不同,好处在于,在我输入一些信息的时候,常需要查看页面上的一些内容,有了拖拽功能,我就可以把弹出框移到一边,以便可以看到挡在下面的信息,这也是拖拽最核心最基础的功能。(下图是新浪微博注册页面点击登录按钮后的弹出层)

二、JavaScript实现原理简述

在AS3中,使用startDrag()就能实现拖拽,但是js中,却没有此方法,但是也是可以实现的,说穿了,挺简单的。实现拖拽方法不少,我呢,js功力尚浅,只知道一种实现原理。如下:
①鼠标按下+鼠标移动 → 拖拽
②鼠标松开 → 无拖拽
③鼠标偏移 → 拖拽距离

用JavaScript事件方法表示就是:
① onmousedown + onmousemove → startDrag()
② onmouseup → stopDrag()
③ ……

关键点就是让鼠标的偏移值赋给拖拽对象。举个例子吧:
比如说凤姐要拉你回家做老公,你是死活不愿意的,结果拉不动你,这就像我们无法拖拽一个普通的页面元素一样。
可以凤姐是前后500年未有的“美人”,功力深厚,她用一股无形的内力将你拴住,内力收多少距离,你抵抗不住,只能被拉回多少距离。结果外人看来,你好像是主动跟着凤姐走的。这就像拖拽一样,鼠标偏移的多少,让被拖拽的元素跟着移动多少,那么,就好像元素是跟着鼠标走的。

好吧,具体细节就不讲了,怕讲多了会起沙尘暴(混乱),那我就罪人了。

三、效果展示、代码及使用

前面两小段,我承认,有凑篇幅的嫌疑,不过这部分不像山西疫苗那样,是没有水分的。

我已经把拖拽的效果封装在一个方法里面了,在本文实例中,此方法独立在一个js文件中,也可以当做一个小插件使用。

此拖拽效果js大小压缩后不足1K,只要几十行代码就可以搞定了,我不喜欢在文章里放长长的代码。

您可以狠狠地点击这里:zxx.drag.1.0.js 或压缩版zxx.drag.1.0-min.js (可“右键 – [目标|链接]另存为”下载)

  1. // by zhangxinxu welcome to visit my personal website http://www.zhangxinxu.com/
  2. // zxx.drag v1.0 2010-03-23 元素的拖拽实现
  3.  
  4. var params = {
  5. left: 0,
  6. top: 0,
  7. currentX: 0,
  8. currentY: 0,
  9. flag: false
  10. };
  11. //获取相关CSS属性
  12. var getCss = function(o,key){
  13. return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
  14. };
  15.  
  16. //拖拽的实现
  17. var startDrag = function(bar, target, callback){
  18. if(getCss(target, "left") !== "auto"){
  19. params.left = getCss(target, "left");
  20. }
  21. if(getCss(target, "top") !== "auto"){
  22. params.top = getCss(target, "top");
  23. }
  24. //o是移动对象
  25. bar.onmousedown = function(event){
  26. params.flag = true;
  27. if(!event){
  28. event = window.event;
  29. //防止IE文字选中
  30. bar.onselectstart = function(){
  31. return false;
  32. }
  33. }
  34. var e = event;
  35. params.currentX = e.clientX;
  36. params.currentY = e.clientY;
  37. };
  38. document.onmouseup = function(){
  39. params.flag = false;
  40. if(getCss(target, "left") !== "auto"){
  41. params.left = getCss(target, "left");
  42. }
  43. if(getCss(target, "top") !== "auto"){
  44. params.top = getCss(target, "top");
  45. }
  46. };
  47. document.onmousemove = function(event){
  48. var e = event ? event: window.event;
  49. if(params.flag){
  50. var nowX = e.clientX, nowY = e.clientY;
  51. var disX = nowX - params.currentX, disY = nowY - params.currentY;
  52. target.style.left = parseInt(params.left) + disX + "px";
  53. target.style.top = parseInt(params.top) + disY + "px";
  54. if (event.preventDefault) {
  55. event.preventDefault();
  56. }
  57. return false;
  58. }
  59.  
  60. if (typeof callback == "function") {
  61. callback(parseInt(params.left) + disX, parseInt(params.top) + disY);
  62. }
  63. }
  64. };
  1. // by zhangxinxu welcome to visit my personal website http://www.zhangxinxu.com/
  2. // zxx.drag v1.0 2010-03-23
  3. var params={left:0,top:0,currentX:0,currentY:0,flag:false};var getCss=function(b,a){return b.currentStyle?b.currentStyle[a]:document.defaultView.getComputedStyle(b,false)[a]};var startDrag=function(a,b,c){if(getCss(b,"left")!=="auto"){params.left=getCss(b,"left")}if(getCss(b,"top")!=="auto"){params.top=getCss(b,"top")}a.onmousedown=function(d){params.flag=true;if(!d){d=window.event;a.onselectstart=function(){return false}}var f=d;params.currentX=f.clientX;params.currentY=f.clientY};document.onmouseup=function(){params.flag=false;if(getCss(b,"left")!=="auto"){params.left=getCss(b,"left")}if(getCss(b,"top")!=="auto"){params.top=getCss(b,"top")}};document.onmousemove=function(i){var j=i?i:window.event;if(params.flag){var f=j.clientX,d=j.clientY;var h=f-params.currentX,g=d-params.currentY;b.style.left=parseInt(params.left)+h+"px";b.style.top=parseInt(params.top)+g+"px";if(i.preventDefault){i.preventDefault()}return false}if(typeof c=="function"){c(parseInt(params.left)+h,parseInt(params.top)+g)}}};

使用如下:
首先调用js文件,如下:

  1. <script src="http://www.zhangxinxu.com/study/js/zxx.drag.1.0.js" type="text/javascript"></script>

然后使用startDrag()方法绑定拖拽效果,startDrag()方法有两个参数,第一个是点击的对象(即点击那里可以实现拖拽,例如弹出层的标题栏),第二个是拖拽的对象(例如一个弹出层)。也就是startDrag(触发拖拽对象,被拖拽对象)。我做了个简单的图示意下,如下:

具体使用如下示例代码:
HTML/CSS

  1. <style type="text/css">
  2. #box{position:absolute; left:100px; top:100px; padding:5px; background:#f0f3f9; font-size:12px; -moz-box-shadow:2px 2px 4px #666666; -webkit-box-shadow:2px 2px 4px #666666;}
  3. #main{border:1px solid #a0b3d6; background:white;}
  4. #bar{line-height:24px; background:#beceeb; border-bottom:1px solid #a0b3d6; padding-left:5px; cursor:move;}
  5. #content{width:420px; height:250px; padding:10px 5px;}
  6. </style>
  7.  
  8. <div id="box">
  9. <div id="main">
  10. <div id="bar">拖拽</div>
  11. <div id="content">
  12. 内容……
  13. </div>
  14. </div>
  15. </div>
 

JS部分

  1. <script src="http://www.zhangxinxu.com/study/js/zxx.drag.1.0.js" type="text/javascript"></script>
  2. <script type="text/javascript">
  3. var oBox = document.getElementById("box");
  4. var oBar = document.getElementById("bar");
  5. startDrag(oBar, oBox);
  6. </script>

上面js部分,加粗代码使关键,是不是使用很简单啊。

您可以狠狠地点击这里:拖拽效果demo

拖拽效果截图:

说明:被拖拽的最想如果不是绝对定位或是相对定位(position:absolute/relative),那么是不会看到效果的。

四、扫尾工作

实现最简单的拖拽效果,方便跟我一样js功力尚浅的人学习,也方便日后的使用:直接调用js链接,一句startDrag(objA, objB);就可以实现效果了。还是那句话,如果您发现文章中有表述不准确或是有相关问题需要交流可以通过评论或是去这里进行提问交流。
原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]

JavaScript实现最简单的拖拽效果的更多相关文章

  1. 拖拽系列一、JavaScript实现简单的拖拽效果

        前端拖拽相关应用汇总 在现实生活中就像男孩子牵着(拖着)女朋友的手穿过马路:从马路的一端走到另一端这种场景很常见: 而在前端开发中拖拽效果也算是前端开发中应用最常见.最普遍的特效:其拖拽涉及知 ...

  2. jquery监听事件on写法以及简单的拖拽效果

    引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: ...

  3. 原生js简单实现拖拽效果

    实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...

  4. JavaScript实现网页元素的拖拽效果

    以下的页面中放了两个div,能够通过鼠标拖拽这两个元素到任何位置. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2ZydWVk/font/5a6 ...

  5. 用JavaScript实现div的鼠标拖拽效果

    实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class=&qu ...

  6. JavaScript实现水平进度条拖拽效果

    <html> <head> <meta charset="UTF-8"> <title>Document</title> ...

  7. 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

    学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...

  8. 使用mousedown、mousemove、mouseup实现拖拽效果

    如何实现一个元素的拖拽效果,使用原生的js实现,习惯了jquery的同学们,你们自己写了吗?N久使用mvvm框架,不写jquery的东西,感觉自己完全不会了. 话不多说,直接上code.本例子以简单的 ...

  9. 超强的纯 CSS 鼠标点击拖拽效果

    背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...

随机推荐

  1. 【Linux/CentOS】上手常见问题笔记

    场景:Web项目服务端想要运行在Linux系统上,还要编写一些自动化发布代码的Shell脚本,需要学习使用Linux系统. 环境:Windows系统下用虚拟机VMware Workstation Pr ...

  2. destoon 添加一个新的模块

    根目录rename,中config.inc.php文件/module/rename下两个文件,my.inc.php ,rename.class.php/module/rename/admin/三个文件 ...

  3. R语言中的factor

    对于初学者来说,R语言中的factor有些难以理解.如果直译factor为“因子”,使得其更加难以理解.我倾向于不要翻译,就称其为factor,然后从几个例子中理解: <span style=& ...

  4. R语言-向量化操作(apply、tapply、lapply、sapply、mapply、table等)

    一.apply函数(对一个数组按行或者按列进行计算): 使用格式为:apply(X, MARGIN, FUN, ...) 其中X为一个数组:MARGIN为一个向量(表示要将函数FUN应用到X的行还是列 ...

  5. FPGA中的时序分析(二)

    使用Timequest 笔者对Altera较熟悉,这里以quartus ii中的timequest作为讲解. Timequest分析时序的核心,也就是在于延迟因数的计算.那么建立约束文件,去告诉tim ...

  6. python2 python3 字符串 编码格式 处理

    使用python的ctypes调用c语言中的函数,传入字符串,打印输出异常.解决方法记录于此. 参考连接: http://blog.csdn.net/u011546806/article/detail ...

  7. 采用MiniProfiler监控EF与.NET MVC项目

    今天来说说EF与MVC项目的性能检测和监控 首先,先介绍一下今天我们使用的工具吧. MiniProfiler~ 这个东西的介绍如下: MVC MiniProfiler是Stack Overflow团队 ...

  8. Spring Boot Controller相应JSP页面 错误whitelabel error page

    在学习SpringBoot显示JSP页面的时候出现了错误,Controller可以正常调用,但是JSP页面就是不能正常显示. whitelabel error page 解决:注释掉scope < ...

  9. Git -- 工作区 和 暂存区

    Git和其他版本控制系统如SVN的一个不同之处就是有暂存区的概念. 先来看名词解释. 工作区(Working Directory) 就是你在电脑里能看到的目录,比如我的learngit文件夹就是一个工 ...

  10. Java对象序列化与RMI

    对于一个存在于Java虚拟机中的对象来说,其内部的状态只保持在内存中.JVM停止之后,这些状态就丢失了.在很多情况下,对象的内部状态是需要被持久化下来的.提到持久化,最直接的做法是保存到文件系统或是数 ...