Posted on 2009-03-06 11:29
vcommon 阅读(625)
评论(0) 编辑 收藏 引用
最近忽然研究了下DIV+javascript
DIV+javascript的拖动效果，层拖动，移动效果(兼容)
本篇文章来源于 - http://www.itokit.com - web开发技术 原文地址是：http://www.itokit.com/bbs/viewthread.php?tid=1751&highlight=
其实原理很简单,巧妙使用了css
DIV ,class
1:折叠: class .hide style
通过当前click的event,找到element,设置style为hide,产生效果折叠.
2:drag效果
onload保存全局body,html,初始化container...，对所有class name = module的li onmousedown添加javascript dragstart
dragstart时重载docoment的onmousemove，onmouseup....,将该element Drag.floatIt(e);Drag.drag(e);
floatIt将创建一个新Element，使用style module ghost,将drag element改到这个Element下,新Element,使用style float，然后drop这个ghost element
drop就比较繁琐点了。重新计算位置。因为insertBefore的参数原因，要计算当前elment和colume...。估计是可以优化的
<style type="text/css">
body,table,td,th,input,textarea,button,select{font:13px/16px Verdana,"宋体",sans-serif;}
table{border-collapse:collapse;}
p{margin:0px;}
.container{margin:8px;}
.column{width:33%;margin:0px;padding:0px;float:left;overflow:hidden;}
.module{margin:5px;padding:0px;border:1px solid #dcd;position:relative;background-color:white;list-style:none;}
.title{background-color:#edf;padding:1px 0px;width:100%;overflow:hidden;cursor:move;z-index:0;font-weight:bold;}
.cont{padding:3px;overflow:hidden;}
.hide .cont{display:none;}
.pageTitle{font-weight:bold;text-align:center;}
input.pageTitle{display:none;border:0px;padding:0px;width:100%;}
.webNote{background-color:#ffffe0;border:1px solid #ffffe0;}
textarea.webNote{display:none;overflow:hidden;padding:0px;border:0px;padding:0px;}
.ghost{border:1px dashed red;}
.float{position:absolute;z-index:100;margin:0px;padding:0px;overflow:hidden;list-style:none;-moz-opacity:.75;filter:Alpha(opacity=75);}
</style>