js实现的简单拖拽效果

浏览：861 发布日期：2014/01/16 分类：功能实现 关键字： sara_org javascript 拖拽

一直用到div的拖拽，从未自己实现过，今天看了一下，简单写一下，还是可以用的，主要分享给那些和我一样js薄弱的哥们，希望可以帮到你们！！！

1. <div id="sara_org" style="width:100px;height:100px;background:#058ccc;position:absolute"></div>
2. <script type="text/javascript">
3.     function sDrag(id) {
4.         var id = id || 'sara';
5.         var m = document.getElementById(id);
6.         var flag = false;
7.         var sX = sY = 0;
8.         m.onmousedown = function(e) {
9.             if (e.button == 0) {
10.                 flag = true;
11.             }
12.             sX = e.clientX - m.offsetLeft;
13.             sY = e.clientY - m.offsetTop;
14.             return false
15.         };
16.         document.onmousemove = function(e) {
17.             if (flag == true) {
18.                 var x = e.clientX - sX;
19.                 var y = e.clientY - sY;
20.                 m.style.marginLeft = m.style.marginTop = 0;
21.                 m.style.left = x + 'px';
22.                 m.style.top = y + 'px';
23.             }
24.             return false;
25.         };
26.         document.onmouseup = function() {
27.             flag = false;
28.             return false;
29.         };
30.     }
31.     $(function() {
32.         sDrag('sara_org');
33.     })
34. </script>

复制代码

AD：8小时应聘1500家公司，创新工场投资，JobDeer.com比猎头更靠谱。

评论（3） 相关

回复_王增煌03月25日

大哥 拖不动。。

回复sara_org03月26日

哈哈，看看你是不是什么地方写错了，浏览器报错了没有！

回复keysarjan01月18日

希望楼主把效果载图一并发布出来

回复sara_org01月18日

这个效果就是div可以随意拖拽，你把上面的html码复制到一个html文件，就可以看到了，是简单的实现了，你明白原理之后，可以任意扩展，就可以和那些弹出层插件一样的拖拽效果了，比如artDialog的弹出来可以推拽！！！