js简单实现多个div拖动效果
时间：2010-07-17
来源：互联网
要在OA里做个便签模块，我想把它做成类似于许愿墙的效果，每条记录放在单独的层里，通过js让每个div可拖动
- <head>
- <style type="text/css">
- #main div{position:absolute;width:220px;height:150px;border:1px solid #999;}
- </style>
- <script type="text/javascript">
- var a;
- document.onmouseup=function(){
- if(!a)return;
- document.all?a.releaseCapture():window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
- a="";
- };
- document.onmousemove=function (d){
- if(!a) return;
- if(!d) d=event;
- a.style.left=(d.clientX-b)+"px";a.style.top=(d.clientY-c)+"px";
- };
- function move(o,e){
- a=o;
- document.all?a.setCapture():window.captureEvents(Event.MOUSEMOVE);
- b=e.clientX-parseInt(a.style.left);
- c=e.clientY-parseInt(a.style.top);
- o.style.zIndex=getMaxIndex()+1;
- }
- function $(id){return document.getElementById(id);}
- function getMaxIndex(){
- var index=0;
- var ds=$('main').getElementsByTagName('div');
- var l=$('main').getElementsByTagName('div').length;
-
- for (i=0;i<l;i++)
- {
- if (ds.style.zIndex>index) index=ds.style.zIndex;
- }
- return index;
- }
- </script>
- </head>
- <body>
- <div id="main">
- <div style="left:100px;top:100px;background:#fc9;">1</div>
- <div style="left:400px;top:100px;background:#9cf;">2</div>
- <div style="left:700px;top:100px;background:#f9c;">3</div>
- <div style="left:100px;top:300px;background:#9fc;">4</div>
- <div style="left:400px;top:300px;background:#c9f;">5</div>
- <div style="left:700px;top:300px;background:#cf9;">6</div>
- </div>
- </body>
- </html>
作者: 柒児 发布时间: 2010-07-17
这段代如果能运行，我一天也不上phpchina.
最关键的错误：for (i=0;i<l;i++)
{
if (ds.style.zIndex>index) index=ds.style.zIndex;
}
最关键的错误：for (i=0;i<l;i++)
{
if (ds.style.zIndex>index) index=ds.style.zIndex;
}
作者: itlong 发布时间: 2010-07-17
回复 柒児
您确定您发的代码是实现您标题所表明的功能的？
您确定您发的代码是实现您标题所表明的功能的？
作者: 我为ぁ琴狂 发布时间: 2010-07-17
同意楼上，楼上的楼上
作者: DouPengFei 发布时间: 2010-07-17
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
