先用div实现布局，以方便定位。
JS可以取得鼠标的操作，把对应的操作存在Cookies中，每次打开这个页面时就可以取得Cookies定好各个DIV的位置
各个DIV加上滑动的效果。。。。
挺简单的思路。。。看下面之前，可以先试试自己的实现方法。。
代码在底部点击下载。
<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; /**//* Moz + FF */
opacity: 0.8; /**//* 支持CSS3的浏览器（FF 1.5也支持）*/
}
DIV.clone_dragLayer_over{}{
border:1px dashed #FA0;
background-color:#6BBA70;
filter:alpha(opacity=80);
-moz-opacity:0.8; /**//* Moz + FF */
opacity: 0.8; /**//* 支持CSS3的浏览器（FF 1.5也支持）*/
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, //拖动标志
shadow: null, //阴影
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);
CoolDrag.shadow = document.createElement("DIV");
document.body.appendChild(CoolDrag.shadow);
with(CoolDrag.cloneobj.style){
position = "absolute";
zIndex = 1000;
left = getRealLeft(CoolDrag.obj) + "px";
top = getRealTop(CoolDrag.obj) + "px";
}
with(CoolDrag.shadow.style){
position = "absolute";
zIndex = 999;
left = getRealLeft(CoolDrag.obj) + 4 + "px";
top = getRealTop(CoolDrag.obj) + 4 + "px";
width = CoolDrag.obj.offsetWidth + "px";
height = CoolDrag.obj.offsetHeight + "px";
backgroundColor = "#ccc";
if(navigator.userAgent.indexOf("Gecko") != -1)
MozOpacity = "0.5";
else if(navigator.userAgent.indexOf("MSIE") != -1)
filter = "alpha(opacity=50)";
}
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);
}
}
with(CoolDrag.shadow.style){
left = (CoolDrag.cloneobj.offsetLeft + 4) + "px";
top = (CoolDrag.cloneobj.offsetTop + 4) + "px";
}
//document.title = CoolDrag.cloneobj.style.left + "|" + CoolDrag.shadow.style.left;
},
end:function(e){
if(!CoolDrag.dragged)return;
CoolDrag.obj.className = "dragLayer";
CoolDrag.dragged = false;
CoolDrag.shadow.parentNode.removeChild(CoolDrag.shadow);
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;