posts - 36, comments - 30, trackbacks - 0, articles - 0

研究 DIV+javascript的拖动效果

Posted on 2009-03-06 11:29 vcommon 阅读(489) 评论(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>

只有注册用户登录后才能发表评论。