拖动可以使用asp.net2.0的webpart来实现

解决方案 »

  1.   

    哦!谢谢,可是我不会用,我一直都是在用2003
    当然,如果2005能用WebParts来实现,我会考虑用2005来做这个项目。
    有没有使用过WebParts的实例!
              请加我QQ谢谢!
      

  2.   

    ajaxtoolkit有个扩展类,也可以让div拖来拽去
    会脚本就自己写好了
      

  3.   

    这些归根结底都是js实现的,与服务器端代码没有关系asp.net 2.0可以使用Webpart控件实现。
    也可以只用js实现
      

  4.   

    JS对于初学者太难了,建议赶紧使用VS2005
      

  5.   

    <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>AJAX</td>
       </tr>
       <tr>
        <td id="div4"></td>
       <tr>
      </table>
      <table border=0 class="dragTable" cellspacing="0">
       <tr>
        <td>datagrid</td>
       </tr>
       <tr>
        <td id="div5"></td>
       <tr>
      </table>
      <table border=0 class="dragTable" cellspacing="0">
        <tr>
          <td>asp.net</td>
        </tr>
        <tr>
          <td id="div3"></td>
        <tr>
        </table></td>
     <td width="25%">
      <table border=0 class="dragTable" cellspacing="0">
       <tr>
        <td>C#.net</td>
       </tr>
       <tr>
        <td id="div2" > </td>
       <tr>
      </table></td>
     <td width="25%">
      <table border=0 class="dragTable" cellspacing="0"  id="td3">
       <tr>
        <td  >javascrip<a href="#" onClick="document.all.td3.style.display='none'" onMouseDown="document.all.imag1.src='Icon2.gif'" onMouseUp="document.all.imag1.src='Icon.gif'" onFocus="this.blur()" ><img src="Icon.gif" width="16" height="14" id="imag1" border="0"></a></td>
       </tr>
       <tr>
        <td id="dv" ><div id="div10" ></div></td>
       <tr>
      </table>
     </td>
    </tr>
    </table>
    </body>
    </html>
     
    这么多人需要我就直接贴代码了! 可以根据这个适当的修改成为你所需要的!
      

  6.   

    zhang024() 谢谢,在段代码我已经有了。
     经理,不让我用JS做,要用C#做!而对WebPart控件我不了解。
               有人提供一点WebPart控件的实例吗?
      

  7.   

    对google个性主页的拖拽效果的js的完整注释
    作者:Tin
    出处:http://www.blogjava.net/iamtin/archive/2006/04/27/43668.html
    代码:http://www.blogjava.net/Files/iamtin/google_drag.rar不用js不容易实现。。C#很多情况下都借助脚本的。
      

  8.   

    webpart在asp.net2.0中是一系统控件,可以实现你想要的功能。也很简单。
      

  9.   

    真的吗?我试试了下,要不要修改Web.Config里面的内容。 不是想要的那么容易呀!
      

  10.   

    http://www.codeproject.com/Ajax/MakingGoogleIG.asp