象http://my.live.com/ 里面可以拖动的功能如何实现

一位高人写的（版权归作者所有）：
<html> 
   <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 
     <title>DargTest</title> 
     <style type="text/css"> 
    body{ font-size:10pt;}
    #Left{border:solid 1px black;position:absolute;}
    #Contain{border:solid 1px blue; position:absolute;}
    div.item{ background-color:black;border:0px; position:absolute;}
    .Copy{filter:alpha(opacity=60);opacity:0.6;}
    .Down{filter:alpha(opacity=100);opacity:1;}
     </style> 
   </head> 
   <body>
   <div id="Left" style="top:20px;left:20px;height:500px;width:100px;">
   </div>
     <div class="item" style="width:50px;height:50px;top:30px;left:30px" id="Item1"></div> 
     <div class="item" style="width:30px;height:30px;top:90px;left:30px" id="Item2"></div>
     <div class="item" style="width:20px;height:20px;top:130px;left:30px" id="Item3"></div>
     <div class="item" style="width:15px;height:15px;top:160px;left:30px" id="Item4"></div> 
   <div id="Contain" style="left:150px;width:500px;height:500px;top:20px;z-index:-1;"></div>
   <script type="text/javascript">
   var DragLeft,DragRight,DragTop,DragBottom;
   var ItemLeft,ItemRight,ItemTop,ItemBottom;
   var CookieName="pos";
   String.prototype.trim=function(reg){if(reg)return this.replace(reg,"");else return this.replace(/^\s*|\s*$/g,"");}
   function $(Id){return document.getElementById(Id);}
   function SaveCookie()
   {
     var cstr="var PosArr=[];";
     var div=document.getElementsByTagName("div");
     for(var i=0;i<div.length;i++)
     {
        if(div[i].className=="item"&&div[i].id)
        {
          cstr+="PosArr['"+div[i].id+"']={top:'"+div[i].style.top+"',left:'"+div[i].style.left+"'};";
        }
     }
     var d=new Date();
     d.setDate(d.getDate()+30);
     document.cookie=CookieName+"="+escape(cstr)+";expires="+d.toGMTString()
   }
   function ReadCookie()
   {
      var str=document.cookie;
      var m=str.match(new RegExp(CookieName+"=([^;]+);?","i"));
      if(m)  return unescape(m[1]);
      else return "";
   }
   window.onload=function()
   {
     var cstr=ReadCookie();
     var Pos;
     if(cstr.trim()!="")
       eval(cstr);//执行cookie的代码生产数组
     var Items=document.getElementsByTagName("div");
     for(var i=0;i<Items.length;i++)
     {
       if(Items[i].className=="item")
       {
         Pos=typeof(PosArr)=="undefined"?null:PosArr[Items[i].id];
         if(Pos)
         {
            Items[i].style.top=Pos.top;
            Items[i].style.left=Pos.left;
         }
         Items[i].onmousedown=MouseDown;
         }
     } 
     var c=$("Left"); 
     ItemLeft=parseInt(c.style.left);
     ItemTop=parseInt(c.style.top);
     c=$("Contain");
     DragLeft=parseInt(c.style.left);
     DragTop=parseInt(c.style.top);  
   }
   
   var OL,OT,ex,ey;
   var MoveDiv=null;
   function MouseDown(e)
   {
     MoveDiv=this;
     OL=parseInt(MoveDiv.style.left);
     OT=parseInt(MoveDiv.style.top);
     MoveDiv.style.left=OL-5+"px"
     MoveDiv.style.top=OT-5+"px"
     MoveDiv.className="item Copy";
     e=e||event;
     ex=e.clientX;
     ey=e.clientY;
     var c=$("Left");
     ItemBottom=ItemTop+parseInt(c.style.height)-MoveDiv.offsetHeight;
     ItemRight=ItemLeft+parseInt(c.style.width)-MoveDiv.offsetWidth;
     c=$("Contain");
     DragBottom=DragTop+parseInt(c.style.width)-MoveDiv.offsetHeight;
     DragRight=DragLeft+parseInt(c.style.height)-MoveDiv.offsetWidth;
   }
   document.onmousemove=function(e)
   {
      if(MoveDiv)
      {
        e=e||event;
        var left=e.clientX-ex+OL;
        var top=e.clientY-ey+OT;
        if(top<DragTop)top=DragTop;
        else if(top>DragBottom)top=DragBottom;
        if(left>DragRight)left=DragRight;
        MoveDiv.style.left=left+"px";
        MoveDiv.style.top=top+"px";
      }
   }
   document.onmouseup=function(e)
   {
     if(MoveDiv)
     {
        e=e||event;
        var left=e.clientX-ex+OL;
        var top=e.clientY-ey+OT;
        if((left>=ItemLeft&&left<=ItemRight)&&(top>=ItemTop&&top<=ItemBottom))//在左边框内
        {
          MoveDiv.className="item";
          MoveDiv=null;
          return;
        }
        else  if(left<DragLeft)//如果不在右边的框内，还原成原来的位置
        {
          MoveDiv.style.left=OL+"px";
          MoveDiv.style.top=OT+"px";
          MoveDiv.className="item";
          MoveDiv=null;
          return;
        }
        MoveDiv.className="item";
        MoveDiv=null;
     }
   }
   window.onbeforeunload=function()
   {
     SaveCookie();
   }
   </script>
   </body> 
</html>