JS的拖拽实现，哪里又好的文章或网站？

介绍你使用
http://script.aculo.us/
的

IGOOGLE里的添加和下面的拖拽很好哦，我拖拽实现了，可是上面的添加之后在下面多一个模块没有实现呢？

拖拽的已经实现了，你可以尝试一下：
javascript就可以了，代码如下：
  <html>
  <head>
  <title>DRAG   the   DIV</title>
  <style>
  *{font-size:12px}
  .dragTable{
    font-size:12px;
    border-top:1px   solid   #3366cc;
    margin-bottom:   10px;
    width:100%;
    background-color:#FFFFFF;
  }
  .dragTR{
    cursor:move;
    color:#7787cc;
    background-color:#e5eef9;
  }
  td{vertical-align:top;}
  #parentTable{
    border-collapse:collapse;
    letter-spacing:25px;
  }
  </style>
  <script   defer>

    var   draged=false;
    tdiv=null;
  function   dragStart(){
    ao=event.srcElement;
    if((ao.tagName=="TD")||(ao.tagName=="TR"))ao=ao.offsetParent;
    else   return;
    draged=true;
    tdiv=document.createElement("div");
    tdiv.innerHTML=ao.outerHTML;
    tdiv.style.display="block";
    tdiv.style.position="absolute";
    tdiv.style.filter="alpha(opacity=70)";
    tdiv.style.cursor="move";
    tdiv.style.width=ao.offsetWidth;
    tdiv.style.height=ao.offsetHeight;
    tdiv.style.top=getInfo(ao).top;
    tdiv.style.left=getInfo(ao).left;
    document.body.appendChild(tdiv);
    lastX=event.clientX;
    lastY=event.clientY;
    lastLeft=tdiv.style.left;
    lastTop=tdiv.style.top;
    try{
      ao.dragDrop();
    }catch(e){}
  }
  function   draging(){//重要:判断MOUSE的位置
    if(!draged)return;
    var   tX=event.clientX;
    var   tY=event.clientY;
    tdiv.style.left=parseInt(lastLeft)+tX-lastX;
    tdiv.style.top=parseInt(lastTop)+tY-lastY;
    for(var   i=0;i<parentTable.cells.length;i++){
      var   parentCell=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(ao);
          }
          break;
        }
        for(var   j=0;j<subTables.length;j++){
          var   subTable=getInfo(subTables[j]);
          if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){
            parentTable.cells[i].insertBefore(ao,subTables[j]);
            break;
          }else{
            parentTable.cells[i].appendChild(ao);
          }
        }
      }
    }
  }
  function   dragEnd(){
    if(!draged)return;
    draged=false;
    mm=ff(150,15);
  }
  function   getInfo(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;
  }
  function   ff(aa,ab){//从GOOGLE网站来,用于恢复位置
    var   ac=parseInt(getInfo(tdiv).left);
    var   ad=parseInt(getInfo(tdiv).top);
    var   ae=(ac-getInfo(ao).left)/ab;
    var   af=(ad-getInfo(ao).top)/ab;
    return   setInterval(function(){if(ab<1){
                clearInterval(mm);
                tdiv.removeNode(true);
                ao=null;
                return
              }
            ab--;
            ac-=ae;
            ad-=af;
            tdiv.style.left=parseInt(ac)+"px";
            tdiv.style.top=parseInt(ad)+"px"
          }
  ,aa/ab)
  }
  function   inint(){//初始化
    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",dragStart);
        subTables[j].attachEvent("ondrag",draging);
        subTables[j].attachEvent("ondragend",dragEnd);
      }
    }
  }
  inint();
  </script>
  </head>
  <body>
  <table   border="0"   cellpadding="0"   cellspacing="10"   width="100%"   height=500   id="parentTable">
  <tr   >
    <td   width="25%"   valgin="top">
      <table   border=0   class="dragTable"   cellspacing="0">
        <tr>
          <td><b>GMAIL</b></td>
        </tr>
        <tr>
          <td>暂时无法显示GMAIL内容</td>
        <tr>
      </table><table   border=0   class="dragTable"   cellspacing="0">
        <tr>
          <td>新浪体育</td>
        </tr>
        <tr>
          <td>解剖威队独门利器FW28   2万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步   印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角   美加施冷箭</td>
        <tr>
      </table><table   border=0   class="dragTable"   cellspacing="0">
        <tr>
          <td>焦点</td>
        </tr>
        <tr>
          <td>京广线中断4小时20临客返汉晚点
  中国新闻网-湖北分社   -   所有   235   相关报道   »哈马斯已有总理人选
  解放日报报业集团   -   所有   489   相关报道   »陈水扁是两岸关系麻烦制造者
  武汉晨报   -   所有   179   相关报道   »</td>
        <tr>
      </table>
    </td>
    <td   width="25%">
      <table   border=0   class="dragTable"   cellspacing="0">
        <tr>
          <td>中关村在线</td>
        </tr>
        <tr>
          <td>新年行情速递   双敏板卡低价推荐   终于等到了，映泰6600GT一降降一百   罗技G15游戏键盘热力促销，代购价仅529元   </td>
        <tr>
      </table></td>
    <td   width="25%">
      <table   border=0   class="dragTable"   cellspacing="0">
        <tr>
          <td>网易商业</td>
        </tr>
        <tr>
          <td>上海GDP增幅去年出现回落应对反倾销   中国鞋企联手对抗欧盟尹家绪操盘南方汽车   长安谋求曲线整体境外上市</td>
        <tr>
      </table>
    </td>
  </tr>
  </table>
  </body>
  </html>

YUI,EXT这些JS框架中都有很好的方法啊，而且效果一流，其实拖拉的原理很简单的，楼主可以去看一下

还是没有彻底实现iGoogle的那种效果，特别是，上面的添加之后在下面多一个模块没有实现呢？请高手请指点哦，期待着

http://topic.csdn.net/u/20070601/09/0728ae95-02ff-4bba-aebb-b3cd85195213.html

调试易

JS的拖拽实现，哪里又好的文章或网站？

解决方案 »