带编辑功能拖拽效果,最好有刷新功能 带编辑功能拖拽效果,每一个能拖拽的窗口上面有编辑,刷新,最小化和关闭功能,感激不尽 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 你可以直接去研究EXT吧。它有实现这种效果 试下这个可以不?<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>可保存位置并自动吸附的拖动层</title><style type="text/css">body{ background-color:#36393D; font-size:12px; margin:0px; }DIV.dragLayer{ border:1px solid #369; background-color:#6BBA70; margin-bottom:10px;}DIV.dragLayer_over{ border:1px solid #C79810; background-color:#6BBA70; filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; }DIV.clone_dragLayer_over{ border:1px dashed #FA0; background-color:#6BBA70; filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; margin-bottom:10px;}DIV.dragHeader{ width:100%; height:20px ; line-height:20px; background-color:#006E2E; color:#FFFFFF;}DIV.dragHeader_over{ width:100%; height:20px ; line-height:20px; background-color:#C79810;}SPAN.min,SPAN.close{cursor:pointer;font-family:Webdings}#container{margin:0px}#leftcontainer{float:left; width:33%;}#middlecontainer{float:left; width:34%;}#middlecontainer div{margin-left:auto; margin-right:auto}#rightcontainer{float:right; width:33%;}#rightcontainer div{float:right}DIV.content{width:100%; padding:4px}</style> <script type="text/javascript">var CoolDrag={ obj : null, //目标对象 cloneobj : null, //拖动对象 container : null, //容器 dragged : false, //拖动标志 init:function(id){ CoolDrag.container = $(id); var cooldrag = CoolDrag.read("cooldrag"); if(cooldrag != ""){//读取cookie var subcontainer = cooldrag.split("|"); for(var i=0 ; i < subcontainer.length; i++){ var subcontainerItem = subcontainer[i].split(":"); if($(subcontainerItem[0])){ var items = subcontainerItem[1].split(","); for(var j=0; j< items.length; j++){ if($(items[j])) $(subcontainerItem[0]).appendChild($(items[j])); } } } } cleanWhitespace(CoolDrag.container)//清除空白节点 var collection = CoolDrag.container.getElementsByTagName("DIV"); for(var i = 0; i < collection.length; i++){ if(collection[i].className == "dragLayer"){ var o = collection[i].firstChild; SavedObject.push([o.parentNode.id,1,o.parentNode.style.height]); o.onmousedown = CoolDrag.start; } } document.onmousemove = CoolDrag.drag; document.onmouseup = CoolDrag.end; }, start:function(e){ if(!e) e = window.event; var obj = getT(e); if(obj.className == "min"){ CoolDrag.min(e); return; }else if(obj.className == "close"){ CoolDrag.close(e); return; }else{ if(obj.className != "dragHeader") obj = obj.parentNode; } CoolDrag.dragged = true; CoolDrag.obj = obj.parentNode; CoolDrag.cloneobj = CoolDrag.obj.cloneNode(true); document.body.appendChild(CoolDrag.cloneobj); with(CoolDrag.cloneobj.style){ position = "absolute"; zIndex = 1000; left = getRealLeft(CoolDrag.obj) + "px"; top = getRealTop(CoolDrag.obj) + "px"; } CoolDrag.cloneobj.initMouseX = getMouseX(e); CoolDrag.cloneobj.initMouseY = getMouseY(e); CoolDrag.cloneobj.initoffsetL = getRealLeft(CoolDrag.obj); CoolDrag.cloneobj.initoffsetY = getRealTop(CoolDrag.obj); //change style CoolDrag.cloneobj.firstChild.className="dragHeader_over"; CoolDrag.cloneobj.className = "dragLayer_over"; CoolDrag.obj.className="clone_dragLayer_over"; }, drag:function(e){ if(!CoolDrag.dragged||CoolDrag.obj==null)return; if(!e) e = window.event; var currenX = getMouseX(e); var currenY = getMouseY(e); if(CoolDrag.cloneobj.initoffsetL + currenX - CoolDrag.cloneobj.initMouseX > getRealLeft(CoolDrag.container)) CoolDrag.cloneobj.style.left = (CoolDrag.cloneobj.initoffsetL + currenX - CoolDrag.cloneobj.initMouseX) + "px"; else CoolDrag.cloneobj.style.left = getRealLeft(CoolDrag.container) + "px"; if(CoolDrag.cloneobj.initoffsetY + currenY - CoolDrag.cloneobj.initMouseY > getRealTop(CoolDrag.container)) CoolDrag.cloneobj.style.top = (CoolDrag.cloneobj.initoffsetY + currenY - CoolDrag.cloneobj.initMouseY) + "px"; else CoolDrag.cloneobj.style.top = getRealTop(CoolDrag.container) + "px"; var collection = CoolDrag.container.getElementsByTagName("DIV"); var finded = false; for(var i = 0; i < collection.length; i++){ var o = collection[i]; if(o.className == "dragLayer"){ if(((getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft && getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft) || (getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft + CoolDrag.cloneobj.offsetWidth && getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft + CoolDrag.cloneobj.offsetWidth)) && getRealTop(o) <= CoolDrag.cloneobj.offsetTop && getRealTop(o) + o.offsetHeight >= CoolDrag.cloneobj.offsetTop) { //window.status = getRealTop(o.parentNode)+"|"+(CoolDrag.cloneobj.offsetTop - 8); if(getRealTop(o.parentNode) >= CoolDrag.cloneobj.offsetTop - 8){ o.parentNode.insertBefore(CoolDrag.obj,o); }else{ if(o.nextSibling) o.parentNode.insertBefore(CoolDrag.obj,o.nextSibling); else o.parentNode.appendChild(CoolDrag.obj); } finded = true; break; } } } if(!finded){ for(var i = 0; i < CoolDrag.container.childNodes.length; i++){ var o = CoolDrag.container.childNodes[i]; if(getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft && getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft) o.appendChild(CoolDrag.obj); } } }, end:function(e){ if(!CoolDrag.dragged)return; CoolDrag.obj.className = "dragLayer"; CoolDrag.dragged = false; CoolDrag.timer = CoolDrag.repos(150,15); //保存cookie var str=""; for(var i=0; i<CoolDrag.container.childNodes.length; i++){ var o = CoolDrag.container.childNodes[i]; if(i>0)str += "|"; str += o.id + ":"; for(var j=0; j < o.childNodes.length; j++){ if(j>0)str += ","; str += o.childNodes[j].id ; } } CoolDrag.save("cooldrag",str,24); }, repos:function(aa,ab){ //var f=CoolDrag.obj.filters.alpha.opacity; var tl=getRealLeft(CoolDrag.cloneobj); var tt=getRealTop(CoolDrag.cloneobj); var kl=(tl-getRealLeft(CoolDrag.obj))/ab; var kt=(tt-getRealTop(CoolDrag.obj))/ab; //var kf=f/ab; return setInterval(function(){if(ab<1){ clearInterval(CoolDrag.timer); CoolDrag.cloneobj.parentNode.removeChild(CoolDrag.cloneobj); CoolDrag.obj=null; return; } ab--; tl-=kl; tt-=kt; //f-=kf; CoolDrag.cloneobj.style.left=parseInt(tl)+"px"; CoolDrag.cloneobj.style.top=parseInt(tt)+"px"; //CoolDrag.tdiv.filters.alpha.opacity=f; } ,aa/ab) }, min:function(e){ if(!e) e = window.event; var obj = getT(e); var rootObj = obj.parentNode.parentNode.parentNode; var id = rootObj.id; if(SavedObject.getStatus(id)[1]){ SavedObject.setStatus(id,0); rootObj.style.height = "20px"; rootObj.childNodes[1].style.display = 'none'; }else{ SavedObject.setStatus(id,1); rootObj.lastChild.style.display = ''; rootObj.style.height = SavedObject.getStatus(id)[2]; } obj.innerHTML = obj.innerHTML==0 ? 2 :0; }, close:function(e){ if(!e) e = window.event; var obj = getT(e); var rootObj = obj.parentNode.parentNode.parentNode; rootObj.parentNode.removeChild(rootObj); }, save:function(name, value, hours){ var expire = ""; if(hours != null) { expire = new Date((new Date()).getTime() + hours * 3600000); expire = "; expires=" + expire.toGMTString(); } document.cookie = name + "=" + escape(value) + expire; }, read:function(name){ var cookieValue = ""; var search = name + "="; if(document.cookie.length > 0) { offset = document.cookie.indexOf(search); if (offset != -1) { offset += search.length; end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; cookieValue = unescape(document.cookie.substring(offset, end)) } } return cookieValue; }}function $(id){ return document.getElementById(id);}function getT(e){ return e.target || e.srcElement;}function getMouseX(e){ return e.pageX ? e.pageX : e.clientX + document.body.scrollLeft - document.body.clientLeft;}function getMouseY(e){ return e.pageY ? e.pageY : e.clientY + document.body.scrollTop - document.body.clientTop;}function getRealLeft(o){ var l = 0; while(o){ l += o.offsetLeft - o.scrollLeft; o = o.offsetParent; } return(l);}function getRealTop(o){ var t = 0; while(o){ t += o.offsetTop - o.scrollTop; o = o.offsetParent; } return(t);}function cleanWhitespace(node) { var notWhitespace = /\S/; for (var i=0; i < node.childNodes.length; i++) { var childNode = node.childNodes[i]; if ((childNode.nodeType == 3) && (!notWhitespace.test(childNode.nodeValue))) { node.removeChild(node.childNodes[i]); i--; } if (childNode.nodeType == 1) { cleanWhitespace(childNode); } }}var SavedObject={ elements : new Array(), setStatus : function(id,s){ for(var i=0;i<SavedObject.elements.length;i++){ if(SavedObject.elements[i][0]==id){ SavedObject.elements[i][1]=s; break; } } }, getStatus : function(id){ for(var i=0;i<SavedObject.elements.length;i++){ if(SavedObject.elements[i][0]==id)return SavedObject.elements[i]; } }, push : function(o){ SavedObject.elements[SavedObject.elements.length]=o; }}</script> </head><body onLoad="CoolDrag.init('container');"><br /><div id="container"><div id="leftcontainer"> <div style="height:100px; width:200px; " class="dragLayer" id="win1"> <div class="dragHeader"> <div style="float:left">窗口一</div> <div style="float:right; "><span class="min">0</span><span class="close">r</span></div> </div> <div class="content"><a href="http://www.codefans.net">window 1</a></div> </div> <div style="height:100px; width:200px; " class="dragLayer" id="win2"> <div class="dragHeader"> <div style="float:left">窗口二</div> <div style="float:right; "><span class="min">0</span><span class="close">r</span></div> </div> <div class="content">window 2</div> </div></div><div id="middlecontainer"> <div style="height:100px; width:200px; " class="dragLayer" id="win3"> <div class="dragHeader"> <div style="float:left">窗口三</div> <div style="float:right; "><span class="min">0</span><span class="close">r</span></div> </div> <div class="content"><a href="http://www.codefans.net">window 3</a></div> </div> <div style="height:100px; width:200px; " class="dragLayer" id="win4"> <div class="dragHeader"> <div style="float:left">窗口四</div> <div style="float:right; "><span class="min">0</span><span class="close">r</span></div> </div> <div class="content">window 4</div> </div></div><div id="rightcontainer"> <div style="height:100px; width:200px; " class="dragLayer" id="win5"> <div class="dragHeader"> <div style="float:left">窗口五</div> <div style="float:right; "><span class="min">0</span><span class="close">r</span></div> </div> <div class="content">window 5</div> </div></div></div></body></html> 例子有点长啊。 JavaScript怎样写网页上的验证码代码? 有人知道MMSsmall()函数的用法吗? isNaN的问题 如何控制alert的坐标? 捧腹网图片的放大缩小是怎么处理的 javascript的级联菜单的问题 如何获得图片离页面左边和顶部的距离,能给完整的例子吗? 在table里包含了几个图片,点击图片的时候触发一个click,点击不是图片的时候触发另外一个click,怎么写? 很急,求救!!! 使用juery显示tab选项卡,如何在点击tab时在客户端获取tab的index jquery 给下面的文本框赋值 问题 高手帮帮 js 和ASP
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>可保存位置并自动吸附的拖动层</title>
<style type="text/css">
body{ background-color:#36393D; font-size:12px; margin:0px; }
DIV.dragLayer{
border:1px solid #369;
background-color:#6BBA70;
margin-bottom:10px;
}
DIV.dragLayer_over{
border:1px solid #C79810;
background-color:#6BBA70;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
}
DIV.clone_dragLayer_over{
border:1px dashed #FA0;
background-color:#6BBA70;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
margin-bottom:10px;
}
DIV.dragHeader{
width:100%; height:20px ; line-height:20px; background-color:#006E2E; color:#FFFFFF;
}
DIV.dragHeader_over{
width:100%; height:20px ; line-height:20px; background-color:#C79810;
}
SPAN.min,SPAN.close{cursor:pointer;font-family:Webdings}
#container{margin:0px}
#leftcontainer{float:left; width:33%;}
#middlecontainer{float:left; width:34%;}
#middlecontainer div{margin-left:auto; margin-right:auto}
#rightcontainer{float:right; width:33%;}
#rightcontainer div{float:right}
DIV.content{width:100%; padding:4px}
</style>
<script type="text/javascript">
var CoolDrag={
obj : null, //目标对象
cloneobj : null, //拖动对象
container : null, //容器
dragged : false, //拖动标志
init:function(id){
CoolDrag.container = $(id);
var cooldrag = CoolDrag.read("cooldrag");
if(cooldrag != ""){//读取cookie
var subcontainer = cooldrag.split("|");
for(var i=0 ; i < subcontainer.length; i++){
var subcontainerItem = subcontainer[i].split(":");
if($(subcontainerItem[0])){
var items = subcontainerItem[1].split(",");
for(var j=0; j< items.length; j++){
if($(items[j])) $(subcontainerItem[0]).appendChild($(items[j]));
}
}
}
}
cleanWhitespace(CoolDrag.container)//清除空白节点
var collection = CoolDrag.container.getElementsByTagName("DIV");
for(var i = 0; i < collection.length; i++){
if(collection[i].className == "dragLayer"){
var o = collection[i].firstChild;
SavedObject.push([o.parentNode.id,1,o.parentNode.style.height]);
o.onmousedown = CoolDrag.start;
}
}
document.onmousemove = CoolDrag.drag;
document.onmouseup = CoolDrag.end;
},
start:function(e){
if(!e) e = window.event;
var obj = getT(e);
if(obj.className == "min"){
CoolDrag.min(e);
return;
}else if(obj.className == "close"){
CoolDrag.close(e);
return;
}else{
if(obj.className != "dragHeader") obj = obj.parentNode;
}
CoolDrag.dragged = true;
CoolDrag.obj = obj.parentNode;
CoolDrag.cloneobj = CoolDrag.obj.cloneNode(true);
document.body.appendChild(CoolDrag.cloneobj);
with(CoolDrag.cloneobj.style){
position = "absolute";
zIndex = 1000;
left = getRealLeft(CoolDrag.obj) + "px";
top = getRealTop(CoolDrag.obj) + "px";
}
CoolDrag.cloneobj.initMouseX = getMouseX(e);
CoolDrag.cloneobj.initMouseY = getMouseY(e);
CoolDrag.cloneobj.initoffsetL = getRealLeft(CoolDrag.obj);
CoolDrag.cloneobj.initoffsetY = getRealTop(CoolDrag.obj);
//change style
CoolDrag.cloneobj.firstChild.className="dragHeader_over";
CoolDrag.cloneobj.className = "dragLayer_over";
CoolDrag.obj.className="clone_dragLayer_over";
},
drag:function(e){
if(!CoolDrag.dragged||CoolDrag.obj==null)return;
if(!e) e = window.event;
var currenX = getMouseX(e);
var currenY = getMouseY(e);
if(CoolDrag.cloneobj.initoffsetL + currenX - CoolDrag.cloneobj.initMouseX > getRealLeft(CoolDrag.container))
CoolDrag.cloneobj.style.left = (CoolDrag.cloneobj.initoffsetL + currenX - CoolDrag.cloneobj.initMouseX) + "px";
else
CoolDrag.cloneobj.style.left = getRealLeft(CoolDrag.container) + "px";
if(CoolDrag.cloneobj.initoffsetY + currenY - CoolDrag.cloneobj.initMouseY > getRealTop(CoolDrag.container))
CoolDrag.cloneobj.style.top = (CoolDrag.cloneobj.initoffsetY + currenY - CoolDrag.cloneobj.initMouseY) + "px";
else
CoolDrag.cloneobj.style.top = getRealTop(CoolDrag.container) + "px";
var collection = CoolDrag.container.getElementsByTagName("DIV");
var finded = false;
for(var i = 0; i < collection.length; i++){
var o = collection[i];
if(o.className == "dragLayer"){
if(((getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft && getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft) ||
(getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft + CoolDrag.cloneobj.offsetWidth &&
getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft + CoolDrag.cloneobj.offsetWidth)) &&
getRealTop(o) <= CoolDrag.cloneobj.offsetTop && getRealTop(o) + o.offsetHeight >= CoolDrag.cloneobj.offsetTop)
{
//window.status = getRealTop(o.parentNode)+"|"+(CoolDrag.cloneobj.offsetTop - 8);
if(getRealTop(o.parentNode) >= CoolDrag.cloneobj.offsetTop - 8){
o.parentNode.insertBefore(CoolDrag.obj,o);
}else{
if(o.nextSibling)
o.parentNode.insertBefore(CoolDrag.obj,o.nextSibling);
else
o.parentNode.appendChild(CoolDrag.obj);
}
finded = true;
break;
}
}
}
if(!finded){
for(var i = 0; i < CoolDrag.container.childNodes.length; i++){
var o = CoolDrag.container.childNodes[i];
if(getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft && getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft)
o.appendChild(CoolDrag.obj);
}
}
},
end:function(e){
if(!CoolDrag.dragged)return;
CoolDrag.obj.className = "dragLayer";
CoolDrag.dragged = false;
CoolDrag.timer = CoolDrag.repos(150,15);
//保存cookie
var str="";
for(var i=0; i<CoolDrag.container.childNodes.length; i++){
var o = CoolDrag.container.childNodes[i];
if(i>0)str += "|";
str += o.id + ":";
for(var j=0; j < o.childNodes.length; j++){
if(j>0)str += ",";
str += o.childNodes[j].id ;
}
}
CoolDrag.save("cooldrag",str,24);
},
repos:function(aa,ab){
//var f=CoolDrag.obj.filters.alpha.opacity;
var tl=getRealLeft(CoolDrag.cloneobj);
var tt=getRealTop(CoolDrag.cloneobj);
var kl=(tl-getRealLeft(CoolDrag.obj))/ab;
var kt=(tt-getRealTop(CoolDrag.obj))/ab;
//var kf=f/ab;
return setInterval(function(){if(ab<1){
clearInterval(CoolDrag.timer);
CoolDrag.cloneobj.parentNode.removeChild(CoolDrag.cloneobj);
CoolDrag.obj=null;
return;
}
ab--;
tl-=kl;
tt-=kt;
//f-=kf;
CoolDrag.cloneobj.style.left=parseInt(tl)+"px";
CoolDrag.cloneobj.style.top=parseInt(tt)+"px";
//CoolDrag.tdiv.filters.alpha.opacity=f;
}
,aa/ab)
},
min:function(e){
if(!e) e = window.event;
var obj = getT(e);
var rootObj = obj.parentNode.parentNode.parentNode;
var id = rootObj.id;
if(SavedObject.getStatus(id)[1]){
SavedObject.setStatus(id,0);
rootObj.style.height = "20px";
rootObj.childNodes[1].style.display = 'none';
}else{
SavedObject.setStatus(id,1);
rootObj.lastChild.style.display = '';
rootObj.style.height = SavedObject.getStatus(id)[2];
}
obj.innerHTML = obj.innerHTML==0 ? 2 :0;
},
close:function(e){
if(!e) e = window.event;
var obj = getT(e);
var rootObj = obj.parentNode.parentNode.parentNode;
rootObj.parentNode.removeChild(rootObj);
},
save:function(name, value, hours){
var expire = "";
if(hours != null)
{
expire = new Date((new Date()).getTime() + hours * 3600000);
expire = "; expires=" + expire.toGMTString();
}
document.cookie = name + "=" + escape(value) + expire;
},
read:function(name){
var cookieValue = "";
var search = name + "=";
if(document.cookie.length > 0)
{
offset = document.cookie.indexOf(search);
if (offset != -1)
{
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
cookieValue = unescape(document.cookie.substring(offset, end))
}
}
return cookieValue;
}
}
function $(id){
return document.getElementById(id);
}
function getT(e){
return e.target || e.srcElement;
}
function getMouseX(e){
return e.pageX ? e.pageX : e.clientX + document.body.scrollLeft - document.body.clientLeft;
}
function getMouseY(e){
return e.pageY ? e.pageY : e.clientY + document.body.scrollTop - document.body.clientTop;
}
function getRealLeft(o){
var l = 0;
while(o){
l += o.offsetLeft - o.scrollLeft;
o = o.offsetParent;
}
return(l);
}
function getRealTop(o){
var t = 0;
while(o){
t += o.offsetTop - o.scrollTop;
o = o.offsetParent;
}
return(t);
}
function cleanWhitespace(node) {
var notWhitespace = /\S/;
for (var i=0; i < node.childNodes.length; i++) {
var childNode = node.childNodes[i];
if ((childNode.nodeType == 3) && (!notWhitespace.test(childNode.nodeValue))) {
node.removeChild(node.childNodes[i]);
i--;
}
if (childNode.nodeType == 1) {
cleanWhitespace(childNode);
}
}
}
var SavedObject={
elements : new Array(),
setStatus : function(id,s){
for(var i=0;i<SavedObject.elements.length;i++){
if(SavedObject.elements[i][0]==id){
SavedObject.elements[i][1]=s;
break;
}
}
},
getStatus : function(id){
for(var i=0;i<SavedObject.elements.length;i++){
if(SavedObject.elements[i][0]==id)return SavedObject.elements[i];
}
},
push : function(o){
SavedObject.elements[SavedObject.elements.length]=o;
}
}
</script>
<body onLoad="CoolDrag.init('container');">
<br />
<div id="container">
<div id="leftcontainer">
<div style="height:100px; width:200px; " class="dragLayer" id="win1">
<div class="dragHeader">
<div style="float:left">窗口一</div>
<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
</div>
<div class="content"><a href="http://www.codefans.net">window 1</a></div>
</div>
<div style="height:100px; width:200px; " class="dragLayer" id="win2">
<div class="dragHeader">
<div style="float:left">窗口二</div>
<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
</div>
<div class="content">window 2</div>
</div>
</div>
<div id="middlecontainer">
<div style="height:100px; width:200px; " class="dragLayer" id="win3">
<div class="dragHeader">
<div style="float:left">窗口三</div>
<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
</div>
<div class="content"><a href="http://www.codefans.net">window 3</a></div>
</div>
<div style="height:100px; width:200px; " class="dragLayer" id="win4">
<div class="dragHeader">
<div style="float:left">窗口四</div>
<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
</div>
<div class="content">window 4</div>
</div>
</div>
<div id="rightcontainer">
<div style="height:100px; width:200px; " class="dragLayer" id="win5">
<div class="dragHeader">
<div style="float:left">窗口五</div>
<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
</div>
<div class="content">window 5</div>
</div>
</div></div>
</body>
</html>
例子有点长啊。