想做一个有多个<div>可以拖拽的页面，兄弟们帮帮我（高分急救）

给你个参考：http://ghtyan.goofar.com

解决方案 »

  1.   

    原代码:<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JK:支持民族工业,尽量少买X货</title>
    <style>
    .removableObj
    {
    height:25;position:relative;
    }
    </style>
    <script language="javascript">
    var beginMoving=false;
    var sourceObj=null;
    var objectObj=null;
    var objectObj2=null;
    function MouseDownToMove(obj){
    obj.style.zIndex=1;
    obj.mouseDownY=event.clientY;
    obj.mouseDownX=event.clientX;
    beginMoving=true;
    obj.setCapture();
    sourceObj=obj;
    objectObj=null;
    }function MouseMoveToMove(obj){
    if(!beginMoving) return false;
    obj.style.top = (event.clientY-obj.mouseDownY);
    obj.style.left = (event.clientX-obj.mouseDownX);
    }
    function MouseUpToMove(obj){
    if(!beginMoving) return false;
    obj.releaseCapture();
    obj.style.top=0;
    obj.style.left=0;
    obj.style.zIndex=0;
    beginMoving=false;
    window.setTimeout("swapFun()",20);
    }function MouseOverFun(obj)
    {
    if(obj==sourceObj) return false;
    objectObj=obj;
    }function MouseOverFun2(obj)
    {
    objectObj2=obj;
    }function swapFun()
    {
    if(sourceObj!=null && objectObj!=null) objectObj.insertAdjacentElement("beforeBegin",sourceObj);
    else if(sourceObj!=null && objectObj2!=null) objectObj2.insertAdjacentElement("beforeEnd",sourceObj);
    sourceObj=null;
    objectObj=null;
    objectObj2=null;
    }
    </script>
    </head><body><table border="1" width="100%" height="58">
    <tr>
    <td width="34%" valign="top" height="46" onmouseover="MouseOverFun2(this);" >
    <table border="1" width="100%" bgcolor="#99CCFF" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
    <tr>
    <td width="23%">和</td>
    <td width="21%">飞过海</td>
    </tr>
    <tr>
    <td width="23%">　</td>
    <td width="21%">　</td>
    </tr>
    </table><table border="1" width="100%" bgcolor="#FFCCFF" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
    <tr>
    <td width="21%">还是</td>
    <td width="35%">护身符哈</td>
    </tr>
    <tr>
    <td width="21%">，</td>
    <td width="35%">和是是护</td>
    </tr>
    </table>
    <table border="1" width="100%" bgcolor="#00CC99" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
    <tr>
    <td width="21%">还是</td>
    <td width="9%">　</td>
    <td width="35%">呵呵</td>
    </tr>
    <tr>
    <td width="21%">，</td>
    <td width="9%">　</td>
    <td width="35%">和</td>
    </tr>
    </table></td>
    <td width="32%" valign="top" height="52" onmouseover="MouseOverFun2(this);" >
    <table border="1" width="100%" bgcolor="#FF0000" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
    <tr>
    <td width="21%">还是</td>
    </tr>
    <tr>
    <td width="21%">，</td>
    </tr>
    </table> 
    <table border="1" width="100%" bgcolor="#00FFFF" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
    <tr>
    <td width="21%">还是</td>
    <td width="35%">护身符哈</td>
    <td width="21%">　</td>
    <td width="23%">呵呵</td>
    </tr>
    <tr>
    <td width="21%">，</td>
    <td width="35%">和是是护</td>
    <td width="21%">　</td>
    <td width="23%">和</td>
    </tr>
    </table></td>
    <td width="34%" valign="top" height="52" onmouseover="MouseOverFun2(this);" >
    <table border="1" width="100%" bgcolor="#FF9966" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
    <tr>
    <td width="21%">还是</td>
    <td width="35%">护身符哈</td>
    <td width="21%">　</td>
    <td width="23%">呵呵</td>
    </tr>
    <tr>
    <td width="21%">，</td>
    <td width="35%">和是是护</td>
    <td width="21%">　</td>
    <td width="23%">和</td>
    </tr>
    </table> 
    <table width="100%" border="1" bgcolor="#FFFFCC" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
    <tr>
    <td width="87">&nbsp;输多发</td>
    <td width="115">嘎撒递归</td>
    </tr>
    <tr>
    <td width="87">嘎大嘎</td>
    <td width="115">大幅度</td>
    </tr>
    <tr>
    <td width="87">过大撒</td>
    <td width="115">嘎</td>
    </tr>
    </table></td>
    </tr>
    </table>
    </body>
    </html>
      

  2.   

    chenyu112(晨雨) 兄弟阿！可是谢谢了
      

  3.   

    那就得随时把位置存放在cookies中了