JavaScript实现最简单的拖拽效果 « 张鑫旭-鑫空间-鑫生活

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=683

一、一些无关痛痒的唠叨

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

类似的效果我们可以在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，只要几十行代码就可以搞定了，我不喜欢在文章里放长长的代码。

更新于2021-12-03
这段代码太老，当年写的时候太年轻，可以跳过，直接看下一小节新的实现。
————

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

使用如下：
首先调用js文件，如下：

<script src="./zxx.drag.1.0.js" type="text/javascript"></script>

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

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

<style type="text/css">
#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;}
#main{border:1px solid #a0b3d6; background:white;}
#bar{line-height:24px; background:#beceeb; border-bottom:1px solid #a0b3d6; padding-left:5px; cursor:move;}
#content{width:420px; height:250px; padding:10px 5px;}
</style>

<div id="box">
    <div id="main">
        <div id="bar">拖拽</div>
        <div id="content">
            内容……
        </div>
    </div>
</div>

JS部分

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

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

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

拖拽效果截图：