msdn的一个例子移动就是这么简单..

都是从网上收集的

yuan_one:

<HTML>
<HEAD>
<TITLE>Editing events sample page</TITLE>
<SCRIPT>
// Turn on 2D positioning
document.execCommand("2D-position",false,true);
// Fires when the onmovestart event is fired
function fnHandleMoveStart() {
var oDiv = event.srcElement
oDiv.style.backgroundColor = "green";
oDiv.innerText = "I Started Moving";
}
// Function called when the onmoveend event is fired
function fnHandleMoveEnd() {
var oDiv = event.srcElement
oDiv.style.backgroundColor = "red";
oDiv.innerText = "I Stopped";
}
</SCRIPT>
</HEAD>
<BODY onmovestart="fnHandleMoveStart();" onmoveend="fnHandleMoveEnd();">
<DIV CONTENTEDITABLE="true">
<DIV style="width:300px;height:100px; color:white; background-color:red;
position:absolute;">
My DIV</DIV>
</DIV>
</BODY>
</HTML>

yuan_two

<SCRIPT>
document.execCommand("2D-position",false,true);
</SCRIPT>
<DIV CONTENTEDITABLE="true">
<DIV style="width:300px;height:100px; color:white; background-color:red;
position:absolute;">
My DIV</DIV>

yuan_three:

<html>
<head>
<title>可随意拖动的图片</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type=text/css>
A:link {color:#00007f;; font-size: 9pt}
A:visited {color:#65038e;}
A:active {text-decoration:underline;color:#ff0000;}
A:hover {text-decoration:underline;color:#ff0000;}
</style>
<script language=JavaScript>

</script>
</head>

<body bgcolor="#FFFFFF" οnlοad=init()>
可随意拖动的图片 <br>
拖动这个图片
<div id=block1 onMouseOut=drag=0 onMouseOver="dragObj=block1; drag=1;"
style="HEIGHT: 32px; LEFT: 290px; POSITION: absolute; TOP: 141px; WIDTH: 32px"><img alt="" border=0 src="images/smile.gif" width="32" height="32" > 　 </div>
<p>效果：可以用鼠标任意拖动的图案<br>

</body>
</html>

yuan_four:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google个性化主页拖搁功能（不包含保存功能）</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
*{padding:0;margin:0}
body{font-family:Verdana,sans-serif;font-size:.7em;line-height:1.5em;margin:0; text-align:center;}
h3{ display:block; margin:10px; text-align:left; width:90%;}
h3 a{color:#3169b5;}
#Copy{border-top:#edf2fb 2px solid; width:90%; text-align:left; color:#666666;}
#Copy a{color:#3169b5; text-decoration:none;}
.dragTable{

border-top:1px solid #3366cc;

margin-bottom: 10px;

width:100%;

background-color:#FFFFFF;

}

td{vertical-align:top; }
ul{ padding:0; margin:0; list-style:none; }
li{ line-height:120%; color:#3169b5; }

.dragTR{

cursor:move;

color:#7787cc;
text-decoration:underline;

background-color:#e5eef9;
padding:10px 0 10px 5px;

font-weight:bold;

}

#parentTable{

border-collapse:collapse;

letter-spacing:25px;

}

</style>

var Drag={dragged:false,

ao:null,

tdiv:null,

dragStart:function(){

Drag.ao=event.srcElement;

if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){

Drag.ao=Drag.ao.offsetParent;

Drag.ao.style.zIndex=100;

}else

return;

Drag.dragged=true;

Drag.tdiv=document.createElement("div");

Drag.tdiv.innerHTML=Drag.ao.outerHTML;

Drag.ao.style.border="1px dashed red";

Drag.tdiv.style.display="block";

Drag.tdiv.style.position="absolute";

Drag.tdiv.style.filter="alpha(opacity=70)";

Drag.tdiv.style.cursor="move";

Drag.tdiv.style.border="1px solid #000000";

Drag.tdiv.style.width=Drag.ao.offsetWidth;

Drag.tdiv.style.height=Drag.ao.offsetHeight;

Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;

Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;

document.body.appendChild(Drag.tdiv);

Drag.lastX=event.clientX;

Drag.lastY=event.clientY;

Drag.lastLeft=Drag.tdiv.style.left;

Drag.lastTop=Drag.tdiv.style.top;

draging:function(){//重要:判断MOUSE的位置

if(!Drag.dragged||Drag.ao==null)return;

var tX=event.clientX;

var tY=event.clientY;

Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;

Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;

for(var i=0;i<parentTable.cells.length;i++){

var parentCell=Drag.getInfo(parentTable.cells[i]);

if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){

var subTables=parentTable.cells[i].getElementsByTagName("table");

if(subTables.length==0){

if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){

parentTable.cells[i].appendChild(Drag.ao);

}

break;

}

for(var j=0;j<subTables.length;j++){

var subTable=Drag.getInfo(subTables[j]);

if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){

parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);

break;

}else{

parentTable.cells[i].appendChild(Drag.ao);

}

dragEnd:function(){

if(!Drag.dragged)return;

Drag.dragged=false;

Drag.mm=Drag.repos(150,15);

Drag.ao.style.borderWidth="0px";

Drag.ao.style.borderTop="1px solid #3366cc";

Drag.tdiv.style.borderWidth="0px";

Drag.ao.style.zIndex=1;

getInfo:function(o){//取得坐标

var to=new Object();

to.left=to.right=to.top=to.bottom=0;

var twidth=o.offsetWidth;

var theight=o.offsetHeight;

while(o!=document.body){

to.left+=o.offsetLeft;

to.top+=o.offsetTop;

o=o.offsetParent;

}

to.right=to.left+twidth;

to.bottom=to.top+theight;

return to;

repos:function(aa,ab){

var f=Drag.tdiv.filters.alpha.opacity;

var tl=parseInt(Drag.getInfo(Drag.tdiv).left);

var tt=parseInt(Drag.getInfo(Drag.tdiv).top);

var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;

var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;

var kf=f/ab;

return setInterval(function(){if(ab<1){

clearInterval(Drag.mm);

Drag.tdiv.removeNode(true);

Drag.ao=null;

return;

}

ab--;

tl-=kl;

tt-=kt;

f-=kf;

Drag.tdiv.style.left=parseInt(tl)+"px";

Drag.tdiv.style.top=parseInt(tt)+"px";

Drag.tdiv.filters.alpha.opacity=f;

}

,aa/ab)

inint:function(){//初始化

for(var i=0;i<parentTable.cells.length;i++){

var subTables=parentTable.cells[i].getElementsByTagName("table");

for(var j=0;j<subTables.length;j++){

if(subTables[j].className!="dragTable")break;

subTables[j].rows[0].className="dragTR";

subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);

}

document.οnmοusemοve=Drag.draging;

document.οnmοuseup=Drag.dragEnd;

}

//end of Object Drag

}

Drag.inint();

function _show(str){

var w=window.open('','');

var d=w.document;

d.open();

str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=/"$1/"$2");

str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />");

str=str.replace(//r/g,"<br />/n");

d.write(str);

}

</script>

</head>

<body>

<div><h3><a href="http://www.syosyume.com">Syosyume's Blog</a></h3>
</div>

<tr >

<tr>

<td><b>GMAIL</b></td>

</tr>

<tr>

    <td>
<ul>
  <li>·Ajax: A New Approach to Web Applications</li>
  <li>·Ajax: A New Approach to Web Applications</li>
</ul>
</td>

<tr>

</table>
<table border=0 class="dragTable" cellspacing="0">

<tr>

<td>Sport</td>

</tr>

<tr>

    <td>
<ul>
  <li>·Ajax: A New Approach to Web Applications</li>
  <li>·Ajax: A New Approach to Web Applications</li>
</ul>
</td>

<tr>

</table>

<tr>

</tr>

<tr>

    <td>
<ul>
  <li>·Ajax: A New Approach to Web Applications</li>
  <li>·Ajax: A New Approach to Web Applications</li>
</ul>
</td>

<tr>

</table>

</td>

<tr>

<td>Weather</td>

</tr>

<tr>

    <td>
<ul>
  <li>·Ajax: A New Approach to Web Applications</li>
  <li>·Ajax: A New Approach to Web Applications</li>
</ul>
</td>

<tr>

</table>
<table border=0 class="dragTable" cellspacing="0">

<tr>

<td>Women</td>

</tr>

<tr>

    <td>
<ul>
  <li>·Ajax: A New Approach to Web Applications</li>
  <li>·Ajax: A New Approach to Web Applications</li>
</ul>
</td>

<tr>

</table>
<table border=0 class="dragTable" cellspacing="0">

<tr>

</tr>

<tr>

    <td>
<ul>
  <li>·Ajax: A New Approach to Web Applications</li>
  <li>·Ajax: A New Approach to Web Applications</li>
</ul>
</td>

<tr>

</table>

</td>

<tr>

<td>Polity</td>

</tr>

<tr>

    <td>
<ul>
  <li>·Ajax: A New Approach to Web Applications</li>
  <li>·Ajax: A New Approach to Web Applications</li>
</ul>
</td>

<tr>

</table>

<table border=0 class="dragTable" cellspacing="0">

<tr>

</tr>

<tr>

    <td>
<ul>
  <li>·Ajax: A New Approach to Web Applications</li>
  <li>·Ajax: A New Approach to Web Applications</li>
</ul>
</td>

<tr>

</table>
<table border=0 class="dragTable" cellspacing="0">

<tr>

</tr>

<tr>

    <td>
<ul>
  <li>·Ajax: A New Approach to Web Applications</li>
  <li>·Ajax: A New Approach to Web Applications</li>
</ul>
</td>

<tr>

</table>

</td>

</tr>

</table>
<div id="Copy">©2006 Syosyume │<a href="http://www.syosyume.com"> Blog</a>│ <a href="http://www.syosyume.com/photo">Photo</a></div>

yuan_five

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta content="text/html;charset=gb2312" http-equiv="content-type">
<style>
*{font-size:9pt;font-family:宋体;line-height:130%;}
</style>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
Global = new Object();
Global.__UniqueID = 0;
Global.GetUniqueID = function(){ return "__MT_UID_" + Global.__UniqueID ++;};
function Dialog(title,icon,body){
this.Icon = icon || "http://www.jsgod.net/test/images/window_blur.gif";
this.Title = title || "Untitled Document";
this.Body = body || "Blank Document";
this.UniqueID = Global.GetUniqueID();
//
this.Width = 400;
this._mousedown = false;
this._offsetX = 0;
this._offsetY = 0;
this._x = 0;
this._y = 0;
var i,l;
//
this.SetRect = function(_width,_top,_left){
  var obj;
  if(_width > 200) this.Width = _width;
  this._x = _left;
  this._y = _top;
  obj = document.getElementById(this.UniqueID);
  if(obj){
   obj.style.width = this.Width;
   obj.style.top = _top;
   obj.style.left = _left;
  }
}
this.SetIndex = function(index){
  if(isNaN(index)) return;
  var obj = document.getElementById(this.UniqueID);
  if(obj) obj.style.zIndex = index;
}
this.BindEvent = function(){
  var self = this,obj = null;
  var table = document.getElementById(this.UniqueID);
  if((null == table)||(table.tagName != "TABLE")) return;
  if(table.rows&&table.rows[0].cells&&table.rows[0].cells[0]&&table.rows[0].cells[0].firstChild){
   obj = table.rows[0].cells[0].firstChild;
   obj.rows[0].cells[2].lastChild.onclick = function(e){
    var obj = document.getElementById(self.UniqueID);
    if(obj) obj.parentNode.removeChild(obj);
   }
   obj.rows[0].cells[2].firstChild.onclick = function(e){
    e = window.event || e;
    var obj = document.getElementById(self.UniqueID);
    if(obj&&obj.rows&&obj.rows.length){
     with(obj.rows[1].style){
      display = display == "" ? "none" : "";
     }
    }
    obj = (e.target || e.srcElement);
    if(obj.on == "true"){
     obj.on = "false";
     obj.src = "http://www.jsgod.net/test/images/min.gif";
    }
    else{
     obj.on = "true";
     obj.src = "http://www.jsgod.net/test/images/max.gif";
    }
   }
   if(obj.rows&&obj.rows[0].cells&&obj.rows[0].cells[0].firstChild) obj = obj.rows[0].cells[0].firstChild;
   obj.onmousedown = function(e){
    e = window.event || e;
    if(e.cancelBubble) e.cancelBubble();
    //Firefox....
   };
   obj.ondblclick = function(){ self.Close();};
   table.onmousedown = function(){
    var obj;
    if(Dialog.ObjectRef&&(this != Dialog.ObjectRef)){
     obj = document.getElementById(Dialog.ObjectRef.UniqueID);
     if(obj){
      obj.style.borderColor = "#cccccc";
      obj.style.zIndex = 90;
      obj.rows[0].cells[0].firstChild.rows[0].cells[0].firstChild.src = "images/window_blur.gif";
     }
    }
    obj = document.getElementById(self.UniqueID);
    if(obj){
     obj.style.borderColor = "lightblue";
     obj.style.zIndex = 99;
     obj.rows[0].cells[0].firstChild.rows[0].cells[0].firstChild.src = "images/window.gif";
    }
    Dialog.ObjectRef = self;
   }
  }
  if(table.rows){
   table.rows[0].cells[0].firstChild.rows[0].cells[1].onmousedown = function(e){
    var obj;
    e = window.event || e;
    self._dragable = true;
    obj = document.getElementById(self.UniqueID);
    if(null == obj) return;
    self._x = e.clientX;
    self._y = e.clientY;
    self._offsetX = parseInt(obj.style.left);
    self._offsetY = parseInt(obj.style.top);
   }
   table.onmouseover = function(e){
    e = window.event || e;
    var obj = document.getElementById(self.UniqueID);
    if(obj) obj.style.cursor = "default";

   };
   table.onmouseup = function(e){
    var obj;
    e = window.event || e;
    self._dragable = false;
    obj = document.getElementById(self.UniqueID);
    if(obj) obj.style.cursor = "default";
   }
   table.rows[0].ondblclick = function(e){
    obj = document.getElementById(self.UniqueID);
    if(null == obj) return;
    if(obj.rows&&(obj.rows.length > 1)){
     with(obj.rows[1].style){
      display = display == "" ? "none" : "";
      obj = obj.rows[0].cells[0].firstChild.rows[0].cells[2].firstChild;
      obj.src = obj.on == "true" ? "http://www.jsgod.net/test/images/min.gif" : "http://www.jsgod.net/test/images/max.gif";
      obj.on = obj.on == "true" ? "false" : "true";
     };
    }
   }
  }
}
this.Close = function(){
  var table = document.getElementById(this.UniqueID);
  if(table) table.parentNode.removeChild(table);
}
this.toString = function(){
  var shtml = '';
  shtml += '<table cellpadding="0" cellspacing="0" border="1" onselectstart="return false;" οncοntextmenu="return false;" οndragstart="return false;" bgcolor="#ffffff" id="' + this.UniqueID + '" style="border:solid 1px #cccccc;cursor:default;width:' + (this.Width) + 'px;position:absolute;top:' + this._y + 'px;left:' + this._x + 'px;">';
  shtml += '<tr height="20"><td style="border:0px;"><table cellpadding="5" cellspacing="0" border="0" width="100%"><tr><td width="20"><img src="' + this.Icon + '" width="16" height="16"/></td><td align="left"><span style="width:200px;overflow:hidden;" title="' + this.Title + '">' + this.Title + '</span></td><td width="32"><img src="http://www.jsgod.net/test/images/min.gif" height="13" width="13" title="最小化" on="false" hspace="1" οnmοuseοver="style.borderColor=/'lightblue/'" style="border:solid 1px #ffffff" οnmοuseοut="style.borderColor=/'#ffffff/'"/><img src="http://www.jsgod.net/test/images/close.gif" width="13" height="13" title="关闭" style="border:solid 1px #ffffff;" οnmοuseοver="style.borderColor=/'lightblue/'" οnmοuseοut="style.borderColor=/'#ffffff/'"/></td></tr>';
  shtml += '</table></td></tr>';
  shtml += '<tr style="display:;"><td style="border:0px;padding:5px;border-top:solid 1px #cccccc;" valign="top">' + this.Body + '</td></tr>';
  shtml += '</table>';
  return shtml;
}
}
document.onmousemove = function(e){
var _x,_y,obj;
e = window.event || e;
if(null == Dialog.ObjectRef) return;
obj = document.getElementById(Dialog.ObjectRef.UniqueID);
if(null == obj) return;
if(Dialog.ObjectRef._dragable){
  obj.style.top = Dialog.ObjectRef._offsetY + e.clientY - Dialog.ObjectRef._y;
  obj.style.left = Dialog.ObjectRef._offsetX + e.clientX - Dialog.ObjectRef._x;
  obj.style.cursor = "move";
}
}

Dialog.ObjectRef = null;
var dialog = new Dialog("哇哈哈",null,"Matrixy Herry");
document.write(dialog);
dialog.BindEvent();
dialog.SetIndex(1);
dialog.SetRect(400,100,200);

var dialog1 = new Dialog("偶来试试",null,'<img src="" width="300" height="200"/>');
document.write(dialog1);
dialog1.BindEvent();
dialog1.SetIndex(2);
dialog1.SetRect(350,100,250);

var dialog2 = new Dialog("Hello World");
document.write(dialog2);
dialog2.BindEvent();
dialog2.SetIndex(24);
dialog2.SetRect(380,10,20);

var dialog3 = new Dialog("4");
document.write(dialog3);
dialog3.BindEvent();
dialog3.SetRect(390,200,100);

var dialog4 = new Dialog("5");
document.write(dialog4);
dialog4.SetIndex(340);
dialog4.BindEvent();

//-->
</SCRIPT>
</BODY>
</HTML>

调用方法：

[Copy to clipboard]

CODE:

var dialog1 = new Dialog("偶来试试",null,'<img src="" width="300" height="200"/>');
document.write(dialog1);
dialog1.BindEvent();
dialog1.SetIndex(2);
dialog1.SetRect(350,100,250);

yuan_six

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<title>DoDi Chat v1.0 Beta</title>
<style rel="stylesheet" type="text/css" media="all" />

</style>
<script language="javascript" type="text/javascript">
<!--
function $(d){return document.getElementById(d);}
function gs(d){var t=$(d);if (t){return t.style;}else{return null;}}
function gs2(d,a){
    if (d.currentStyle){
      var curVal=d.currentStyle[a]
    }else{
      var curVal=document.defaultView.getComputedStyle(d, null)[a]
    }
    return curVal;
}
function ChatHidden(){gs("ChatBody").display = "none";}
function ChatShow(){gs("ChatBody").display = "";}
function ChatClose(){gs("main").display = "none";}
function ChatSend(obj){
    var o = obj.ChatValue;
    if (o.value.length>0){
      $("ChatContent").innerHTML += "<strong>Akon说：</strong>"+o.value+"<br/>";
      o.value='';
    }
}

if (document.getElementById){
    (
      function(){
        if (window.opera){ document.write("<input type='hidden' id='Q' value=' '>"); }

        var n = 500;
        var dragok = false;
        var y,x,d,dy,dx;

        function move(e)
        {
          if (!e) e = window.event;
          if (dragok){
            d.style.left = dx + e.clientX - x + "px";
            d.style.top = dy + e.clientY - y + "px";
            return false;
          }
        }

        function down(e){
          if (!e) e = window.event;
          var temp = (typeof e.target != "undefined")?e.target:e.srcElement;
          if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass"){
            temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
          }
          if('TR'==temp.tagName){
            temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
            temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
            temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
          }

          if (temp.className == "dragclass"){
            if (window.opera){ document.getElementById("Q").focus(); }
            dragok = true;
            temp.style.zIndex = n++;
            d = temp;
            dx = parseInt(gs2(temp,"left"))|0;
            dy = parseInt(gs2(temp,"top"))|0;
            x = e.clientX;
            y = e.clientY;
            document.onmousemove = move;
            return false;
          }
        }

        function up(){
          dragok = false;
          document.onmousemove = null;
        }

        document.onmousedown = down;
        document.onmouseup = up;

      }
    )();
}
-->
</script>
</head>

</body>
</html>

yuan_seven:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="UTF-8" lang="UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="UTF-8" />
<title>后台管理</title>
<style type="text/css">
body {margin:0;text-align:center;color:#000;font:normal 12px Arial,Verdana,Tahoma;text-align:center;background:#C8D0D5;line-height:150%;}
a:link,a:visited {color:#385065;text-decoration:none}
a:hover {text-decoration:underline}
#menu {width:150px;margin:0px 15px;padding:0px;text-align:left;list-style:none}
#menu .item {margin:5px 0px;padding:0px;list-style:none}
a.title:link, a.title:visited, a.title:hover {display:block;background:url( http://www.tblog.com.cn/attachments/month_0609/m20069110491.gif) no-repeat;color:#385065;font-weight:bold;padding:2px 0 0 22px;width:128px;line-height:23px;cursor:pointer;text-decoration:none}
#menu .item ul {border:1px solid #9FACB7;margin:0;width:118px;padding:3px 0px 3px 30px;background:#fff;list-style:none;display:none}
#menu .item ul li {display:block;}
</style>
<script language="javascript" type="text/javascript">
// --- 获取ClassName
document.getElementsByClassName = function(cl) {
  var retnode = [];
  var myclass = new RegExp('//b'+cl+'//b');
  var elem = this.getElementsByTagName('*');
  for (var j = 0; j < elem.length; j++) {
   var classes = elem[j].className;
   if (myclass.test(classes)) retnode.push(elem[j]);
  }
  return retnode;
}

// --- 隐藏所有
function HideAll() {
  var items = document.getElementsByClassName("optiton");
  for (var j=0; j<items.length; j++) {
   items[j].style.display = "none";
  }
}

// --- 设置cookie
function setCookie(sName,sValue,expireHours) {
  var cookieString = sName + "=" + escape(sValue);
  //;判断是否设置过期时间
  if (expireHours>0) {
    var date = new Date();
    date.setTime(date.getTime + expireHours * 3600 * 1000);
    cookieString = cookieString + "; expire=" + date.toGMTString();
  }
  document.cookie = cookieString;
}

//--- 获取cookie
function getCookie(sName) {
   var aCookie = document.cookie.split("; ");
   for (var j=0; j < aCookie.length; j++){
  var aCrumb = aCookie[j].split("=");
  if (escape(sName) == aCrumb[0])
    return unescape(aCrumb[1]);
   }
   return null;
}

window.onload = function() {
  var show_item = "opt_1";
  if (getCookie("show_item") != null) {
    show_item= "opt_" + getCookie("show_item");
  }
  document.getElementById(show_item).style.display = "block";
  var items = document.getElementsByClassName("title");
  for (var j=0; j<items.length; j++) {
   items[j].onclick = function() {
    var o = document.getElementById("opt_" + this.name);
    if (o.style.display != "block") {
     HideAll();
     o.style.display = "block";
     setCookie("show_item",this.name);
    }
    else {
     o.style.display = "none";
    }
   }
  }
}
</script>
</head>

<body>
<ul id="menu">
<li class="item"><a href="javascript:void(0)" class="title" name="1">基本信息</a>
   <ul id="opt_1" class="optiton">
    <li><a href="#">企业简介</a></li>
    <li><a href="#">企业新闻</a></li>
   </ul>
</li>
<li class="item"><a href="javascript:void(0)" class="title" name="2">系统管理</a>
   <ul id="opt_2" class="optiton">
    <li><a href="#">企业简介</a></li>
    <li><a href="#">企业新闻</a></li>
   </ul>
</li>
<li class="item"><a href="javascript:void(0)" class="title" name="3">系统管理</a>
   <ul id="opt_3" class="optiton">
    <li><a href="#">会员管理</a></li>
    <li><a href="#">管理员设置</a></li>
    <li><a href="#">权限组设置</a></li>
    <li><a href="#">退出系统</a></li>
   </ul>
</li>
</ul>
</body>
</html>

yuan_eight:

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" " http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta http-equiv="content-language" content="zh-cn" />
<meta name="author" content="forfor" />
<meta name="keywords" content="" />
<title> Tab Demo </title>
<script type="text/javascript">

</script>
<style type="text/css">
body,table,td,th,input,textarea,button,select{font:13px Verdana,"宋体",sans-serif;}
body{background-color:#eef;}

div#tab{width:300px;text-align:left;}
ul.tabU{
list-style: none;
margin: 0px;
padding:1px 0px 0px .5em;
}
ul.tabU li{
display: inline;
margin-right:2px;
}
ul.tabU li a{
color:black;
font-weight:bold;
line-height: 20px;
text-decoration:none;
background-image: url( http://www.vscn.net/forfor/demo/_img/tab.gif);
border:1px #BBBBBB solid;
border-bottom-width:0px;
padding:0px 5px 2px;
cursor: pointer;
}
div.tabC{
display:none;
border:1px solid;
padding:6px;
}

div.tabD1 a.tabB1,a.tabB1:hover{background-position:0 -20px;border-color:#EAAD6B;}
div.tabD1 div.tabC1{border-color:#EAAD6B;display:block;background-color:#FDEDD8;}

div.tabD2 a.tabB2,a.tabB2:hover{background-position:0 -42px;border-color:#6ECEF3;}
div.tabD2 div.tabC2{border-color:#6ECEF3;display:block;background-color:#E6F6FD;}

div.tabD3 a.tabB3,a.tabB3:hover{background-position:0 -64px;border-color:#84AC44;}
div.tabD3 div.tabC3{border-color:#84AC44;display:block;background-color:#F1F6E7;}

div.tabD4 a.tabB4,a.tabB4:hover{background-position:0 -86px;border-color:#F37CA3;}
div.tabD4 div.tabC4{border-color:#F37CA3;display:block;background-color:#FFEEF4;}

div.tabD1 a.tabB1,div.tabD2 a.tabB2,div.tabD3 a.tabB3,div.tabD4 a.tabB4{padding:1px 5px 3px;}
</style>
</head>
<body>
<center>
<div id="tab" class="tabD1">
<script type="text/javascript">

</script>
<ul class="tabU">
<li><a οnclick="c(1)" href="#1" class="tabB1">tab1</a></li><li><a οnclick="c(2)" href="#2" class="tabB2">tab2</a></li><li><a οnclick="c(3)" href="#3" class="tabB3">tab3</a></li><li><a οnclick="c(4)" href="#4" class="tabB4">tab4</a></li>
</ul>
<div class="tabC tabC1"><b>Tab Demo</b> Ver1.2(window.name)<br/>Created by forfor 2006-09-12</div>
<div class="tabC tabC2"><input value="hello"/></div>
<div class="tabC tabC3"><center><img alt="google" src=" http://www.google.com/intl/en/images/logo.gif"/></center></div>
<div class="tabC tabC4">ver1.0 2005-09-09<br/>ver1.1 2005-09-14<br/>ver1.2 2006-09-12<br/><a href="javascript:void(c(0));">......</a></div>
</div>
</center>
</body>
</html>

yuan_nine:

function oMp(){
M=false
obj.releaseCapture()
}

function oMe(){
   if(M&&event.clientX>obj.offsetWidth+layer0.offsetLeft&&event.clientX<layer0.offsetLeft+layer0.offsetWidth-obj.offsetWidth&&event.clientY>layer0.offsetTop+obj.offsetHeight&&event.clientY<layer0.offsetTop+layer0.offsetHeight){
         obj.style.pixelLeft=event.clientX-xpos
         ip.style.pixelTop=event.clientY-ypos
         ll.style.pixelTop=ip.style.pixelTop+ip.offsetHeight-ll.offsetHeight

    }
}

function oDn(){
   if(event.button==1){
     obj=event.srcElement
     xpos=event.clientX-obj.style.pixelLeft
     ypos=event.clientY-obj.style.pixelTop
     M=true
     obj.setCapture()
   }
}
</script>