Javascript实现的类似Google的Div拖动程序，有个问题搞不懂，请大家帮忙看看啊

JScript 文件：//检测浏览器 MSIE Firefox var ie=false,moz=false;
(function()
{//check the browser
   var userAgent=navigator.userAgent;
   if(userAgent.indexOf("MSIE")!=-1)
       ie=true;
   else if(userAgent.indexOf("Firefox")!=-1)
       moz=true;
})();//通过ID获得对象
function $E_ID(idString)
{
   return document.getElementById(idString);
}//通过Name获得对象
function $Es_Tag(tagName)
{
   return document.getElementsByTagName(tagName);
}//获得对象绝对位置  obj.offsetparent
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)
   {
       to.left+=o.offsetLeft;
       to.top+=o.offsetTop;
       o=o.offsetParent;
   }
       to.right=to.left+twidth;
       to.bottom=to.top+theight;
   return to;
}//鼠标点击对象确发事件
function $hitTest(obj,event)
{
   obj=$GetInfo(obj);
   var x=event.clientX;
   var y=event.clientY;
   if((x>=obj.left&&x<=obj.right)&&(y>=obj.top&&y<=obj.bottom))
   　return true;
   else
   　return false;

}function Drag(event)
{
   this.dragged=false;
   this.ao=null;
   this.tdiv=null;
   this.fixLeft=0;
   this.fixTop=0;
   this.lastX=event.clientX;
   this.lastY=event.clientY;
   Drag.mm=null;
   this.dragStart=function(event)
   {
       this.ao=ie?event.srcElement:(moz?event.target:null);
       if(ie)
       document.body.onselectstart=function()
       {
      　　return false
      　　}
       if(moz&&this.ao.nodeType==3)
       　this.ao=this.ao.parentNode;
       if(this.ao.tagName=="TD"||this.ao.tagName=="TR")
       　this.ao=this.ao.offsetParent.parentNode;
       else
       　return;

       if(this.ao.className!="dragdiv")
       　return;
       this.tdiv=$E_ID("tmpdiv");
       this.tdiv.style.visibility="visible";
       this.tdiv.style.filter="alpha(opacity=70)";
       if(ie)
       　this.tdiv.filters.alpha.opacity=70;
       this.tdiv.style.opacity=0.7;
       this.tdiv.style.zIndex=100;
       this.tdiv.innerHTML=this.ao.innerHTML;
       this.tdiv.style.width=this.ao.offsetWidth+"px";
       this.tdiv.style.height=this.ao.offsetHeight+"px";
       this.tdiv.style.top=$GetInfo(this.ao).top+"px";
       this.tdiv.style.left=$GetInfo(this.ao).left+"px";
       this.fixTop=parseInt($GetInfo(this.tdiv).top);
       this.fixLeft=parseInt($GetInfo(this.tdiv).left);
       this.dragged=true;

   }
   this.onDrag=function(event)
   {
       if((!this.dragged)||this.ao==null)return;
       var tX=event.clientX;
       var tY=event.clientY;
       this.tdiv.style.left=parseInt(this.fixLeft+tX-this.lastX-document.body.scrollLeft)+"px";
       this.tdiv.style.top=parseInt(this.fixTop+tY-this.lastY-document.body.scrollTop)+"px";

        for(var m=0;m<$E_ID("root").rows.length;m++)
        {
          var rootCells=$E_ID("root").rows[m].cells;
           for(var i=0;i<rootCells.length;i++)
           {
               if($hitTest(rootCells[i],event))
               {
                   if(rootCells[i].hasChildNodes())
                   {
                       for(var j=0;j<rootCells[i].childNodes.length;j++)
                       {
                           if($hitTest(rootCells[i].childNodes[j],event))
                           {
                               rootCells[i].insertBefore(this.ao,rootCells[i].childNodes[j]);
                               break;
                           }
                       }
                       if(j==rootCells[i].childNodes.length)
                       {
                               rootCells[i].appendChild(this.ao);break;
                       }
                       break;
                   }
                   else
                   {
                       rootCells[i].appendChild(this.ao);
                       break;
                   }
               }
           }

        }
   }
   this.dragEnd=function()
   {
       if(this.dragged)
       {
           this.dragged=false;
           Drag.mm=this.repos(150,15,this);
           this.ao=null;
       }
       if(ie)document.body.onselectstart=function(){return true}
   }
   this.repos=function(aa,ab,obj)
   {
       if(ie)var f=obj.tdiv.filters.alpha.opacity;
       else if(moz)var f=obj.tdiv.style.opacity*100;
       var kf=f/ab;
       var tl=parseInt($GetInfo(obj.tdiv).left);
       var tt=parseInt($GetInfo(obj.tdiv).top);
       var kl=(tl-$GetInfo(obj.ao).left)/ab;
       var kt=(tt-$GetInfo(obj.ao).top)/ab;
       return setInterval(function(){
          if(ab<1)
          {
               clearInterval(Drag.mm);
               obj.tdiv.style.visibility="hidden";
               obj.tdiv.style.zIndex="";
               return;
                           }
                       ab--;
                       tl-=kl;
                       tt-=kt;
                       f-=kf;
                       obj.tdiv.style.left=parseInt(tl)+"px";
                       obj.tdiv.style.top=parseInt(tt)+"px";
                       if(ie)obj.tdiv.filters.alpha.opacity=f;
                       else if(moz)obj.tdiv.style.opacity=f/100;
               },aa/ab );
   }
}var tDrag=null;function init(event)
{
//   alert(event.target.innerHTML);
   tDrag=new Drag(event);
   tDrag.dragStart(event);
}function move(event)
{
   if(tDrag!=null)tDrag.onDrag(event);
}function end()
{
   if(tDrag!=null){
       tDrag.dragEnd();
       tDrag=null;
   }
}

Asp.net文件：
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %><!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 >
    <title>Div拖动</title>
<style type="text/css">
  
</style>
<script type="text/javascript" src="DivDrag.js"></script>
</head>
<body onMouseDown="init(event)" onMouseUp="end()" onMouseMove="move(event)" >
<script language="javascript" type="text/javascript" >
   document.write("<div id='tmpdiv'><\/div>");
</script>
<table id="root" style="width:600px;height:300px" cellpadding="0" cellspacing="1"  >
  <tr style="height:150px;width:600px">
    <td style="width:200px; height: 50px;">
        <div class="dragdiv" id="div1" >
           <table style="height:100%;width:100%" border ="0">
              <tr>
                <td>
                <input id="Button1" type="button" value="button" />
                  可移动DIV1<br>
                  点击即可开始拖动!
                </td>
              </tr>
           </table>
        </div>
    </td>
    <td style="width:200px; height: 50px;">
        <div class="dragdiv" id="div2"
           <table style="height:100%;width:100%" border ="0">
              <tr>
                <td>
                <input id="Button2" type="button" value="button" />
                  可移动DIV2<br>
                  点击即可开始拖动!
                </td>
              </tr>
           </table>
        </div>
    </td>
    <td style="width:200px; height: 50px;">
        <div class="dragdiv" id="div3"
           <table style="height:100%;width:100%" border ="0">
              <tr>
                <td>
                <input id="Button3" type="button" value="button" />
                  可移动DIV3<br>
                  点击即可开始拖动!
                </td>
              </tr>
           </table>
        </div>
    </td> </tr>
<tr style="height:150px;width:600px">
    <td style="width:200px; height: 50px;">    </td>
    <td style="width:200px; height: 50px;">    </td>
    <td style="width:200px; height: 50px;">    </td> </tr>
<tr style="height:150px;width:600px">
    <td style="width:200px; height: 50px;">    </td>
    <td style="width:200px; height: 50px;">    </td>
    <td style="width:200px; height: 50px;">    </td> </tr>
</table>
  </body>
</html>

<html>
<head>
<title>test</title>
<style type='text/css'></style>
<script language="JScript">
var x0=0,y0=0,x1=0,y1=0;
var offx=10,offy=10;
var moveable=false;
var index=10000;//z-index;
var win=null;
function document.onkeydown(){
    if(event.keyCode==46){
   if(win!=null){
     win.style.visibility="hidden";
     win=null;
    }
   else
     alert("请先选择您要删除的功能模块!");
}
}
//开始拖动;
function startDrag(obj)
{
       if(event.button==1)
       {
               //锁定标题栏;
               obj.setCapture();
               //定义对象;
               win = obj;
               //记录鼠标和层位置;
               x0 = event.clientX;
               y0 = event.clientY;
               x1 = parseInt(win.style.left);
               y1 = parseInt(win.style.top);
               moveable = true;
       }
}
//拖动;
function drag(obj)
{
       if(moveable)
       {
               win = obj;
               win.style.left = x1 + event.clientX - x0;
               win.style.top  = y1 + event.clientY - y0;
   }}
//停止拖动;
function stopDrag(obj)
{
       if(moveable)
       {
               win = obj;
               obj.releaseCapture();
               moveable = false;
       }
}
//获得焦点;
function getFocus(obj)
{
       if(obj.style.zIndex!=index)
       {
               index = index + 2;
               idx = index;
               obj.style.zIndex=idx;
       }
}
//创建一个对象;
function  test(id,l,t,msg)
{
       index = index+2;
       this.id      = id;
       this.left    = l;
       this.top     = t;
       this.zIndex  = index;
       this.message = msg;
       this.obj     = null;
       this.bulid   = bulid;
       this.bulid(id);
}
//初始化;
function bulid(id)
{
       var str = ""
               + "<div id=test" + this.id + " "
               + "style='"
               + "z-index:" + this.zIndex + ";"
               + "left:" + this.left + ";"
   + "top:" + this.top + ";"
               + "font-size:10px;"
               + "font-family:Verdana;"
               + "position:absolute;"
               + "cursor:default;"
   + "border:2px solid slategray;";
if(id==1)str+= "background-color:orange;";
else if(id==2)str+= "background-color:red;";
else if(id==3)str+= "background-color:yellow;";
else if(id==4)str+= "background-color:blue;";
else if(id==5)str+= "background-color:green;";
else if(id==6)str+= "background-color:lightblue;";

        str = str + "' "
               + "onmousedown='getFocus(this);startDrag(this)'"
   + "onmouseup='stopDrag(this)' "
   + "onmousemove='drag(this)' "
   + ">"
   + this.message
   + "</div>"
       document.body.insertAdjacentHTML("beforeEnd",str);
}
function initialize()
{
      //function test(id,l,t,msg)
      new test("1",120,100,"<table><tr><td>AAAAAAAAAAAAA</td></tr><tr><td>testtesttest</td></tr><tr><td>testtesttest</td></tr></table>");
      new test("2",300,100,"<table><tr><td>BBBBBBBBBBBBB</td></tr><tr><td>test001test001test001</td></tr><tr><td>test001test001test001</td></tr></table>");
      new test("3",120,200,"<table><tr><td>CCCCCCCCCCCCC</td></tr><tr><td>test002test002test002</td></tr><tr><td>test002test002test002</td></tr></table>");
       new test("4",120,150,"<table><tr><td>AAAAAAAAAAAAA</td></tr><tr><td>testtesttest</td></tr><tr><td>testtesttest</td></tr></table>");
      new test("5",300,150,"<table><tr><td>BBBBBBBBBBBBB</td></tr><tr><td>test001test001test001</td></tr><tr><td>test001test001test001</td></tr></table>");
      new test("6",120,250,"<table><tr><td>CCCCCCCCCCCCC</td></tr><tr><td>test002test002test002</td></tr><tr><td>test002test002test002</td></tr></table>");
}
window.onload = initialize;
</script>
</head>
<body oncontextmenu='return false' scroll='no'>
<FONT face="宋体"></FONT>
</body>
</html>

楼上代码我拷到asp.net页面中就不行了,自己建立了一个Div就无法拖动了,程序自动生成的Div就没有问题.<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="Default6" %><!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 runat="server">
    <title>无标题页</title>
    <style type='text/css'>

</style>
<script language="JScript" type="text/javascript">
            var x0=0,y0=0,x1=0,y1=0;
            var offx=10,offy=10;
            var moveable=false;
            var index=10000;//z-index;
            var win=null;
            function document.onkeydown()
            {
                if(event.keyCode==46)
                {
               if(win!=null)
               {
                 win.style.visibility="hidden";
                 win=null;
                }
               else
                 alert("请先选择您要删除的功能模块!");
            }
            }
            //开始拖动;
            function startDrag(obj)
            {
                   if(event.button==1)
                   {
                           //锁定标题栏;
                           obj.setCapture();
//                           obj.style.visibility="visible";
                           obj.style.filter="alpha(opacity=20)";
//                           obj.style.filter="blur(add=ture,direction=135,strength=10)";
//       　                  obj.filters.alpha.opacity=70;
//                           obj.style.opacity=0.7;
//                           obj.style.zIndex=100;
                           //定义对象;
                           win = obj;
                           //记录鼠标和层位置;
                           x0 = event.clientX;
                           y0 = event.clientY;
                           x1 = parseInt(win.style.left);
                           y1 = parseInt(win.style.top);
                           moveable = true;
                   }
            }
            //拖动;
            function drag(obj)
            {
                   if(moveable)
                   {
                           win = obj;
                           win.style.left = x1 + event.clientX - x0;
                           win.style.top  = y1 + event.clientY - y0;
               }            }
            //停止拖动;
            function stopDrag(obj)
            {
                   if(moveable)
                   {
                           win = obj;
                           obj.releaseCapture();
                           obj.style.filter="alpha(opacity=100)";
                           moveable = false;
                   }
            }
            //获得焦点;
            function getFocus(obj)
            {
                   if(obj.style.zIndex!=index)
                   {
                           index = index + 2;
                           idx = index;
                           obj.style.zIndex=idx;
                   }
            }
            //创建一个对象;
            function  test(id,l,t,msg)
            {
                   index = index+2;
                   this.id      = id;
                   this.left    = l;
                   this.top     = t;
                   this.zIndex  = index;
                   this.message = msg;
                   this.obj     = null;
                   this.bulid   = bulid;
                   this.bulid(id);
            }
            //初始化;
            function bulid(id)
            {
                   var str = ""
                           + "<div id=test" + this.id + " "
                           + "style='"
                           + "z-index:" + this.zIndex + ";"
                           + "left:" + this.left + ";"
               + "top:" + this.top + ";"
                           + "font-size:10px;"
                           + "font-family:Verdana;"
                           + "position:absolute;"
                           + "cursor:default;"
               + "border:2px solid slategray;";
            if(id==1)str+= "background-color:orange;";
            else if(id==2)str+= "background-color:red;";
            else if(id==3)str+= "background-color:yellow;";
            else if(id==4)str+= "background-color:blue;";
            else if(id==5)str+= "background-color:green;";
            else if(id==6)str+= "background-color:lightblue;";

                    str = str + "' "
                           + "onmousedown='getFocus(this);startDrag(this)'"
               + "onmouseup='stopDrag(this)' "
               + "onmousemove='drag(this)' "
               + ">"
               + this.message
               + "</div>"
                   document.body.insertAdjacentHTML("beforeEnd",str);
            }
            function initialize()
            {
                  //function test(id,l,t,msg)
                  //new test("1",120,100,"<table><tr><td>AAAAAAAAAAAAA</td></tr><tr><td>testtesttest</td></tr><tr><td>testtesttest</td></tr></table>");
                  new test("2",300,100,"<table><tr><td>BBBBBBBBBBBBB</td></tr><tr><td>test001test001test001</td></tr><tr><td>test001test001test001</td></tr></table>");
                  new test("3",120,200,"<table><tr><td>CCCCCCCCCCCCC</td></tr><tr><td>test002test002test002</td></tr><tr><td>test002test002test002</td></tr></table>");
                  new test("4",120,150,"<table><tr><td>AAAAAAAAAAAAA</td></tr><tr><td>testtesttest</td></tr><tr><td>testtesttest</td></tr></table>");
                  new test("5",300,150,"<table><tr><td>BBBBBBBBBBBBB</td></tr><tr><td>test001test001test001</td></tr><tr><td>test001test001test001</td></tr></table>");
                  new test("6",120,250,"<table><tr><td>CCCCCCCCCCCCC</td></tr><tr><td>test002test002test002</td></tr><tr><td>test002test002test002</td></tr></table>");
            }
            window.onload = initialize;
</script>
</head>
<body>


  <form id="form1" runat="server">
     <div id="test1" style="z-index:10001;
  font-size:10px;
  font-family:Verdana;
  border:2px solid slategray;
  background-color:yellow;position:absolute;left:100;top:50;cursor:hand;" onmousedown="getFocus(this);startDrag(this)" onmouseup="stopDrag(this)" onmousemove="drag(this)">
  <table><tr><td>yyyyyy</td></tr><tr><td>testtesttest</td></tr><tr><td>testtesttest</td></tr></table>
</div>
    </form>

</body>
</html>

调试易

Javascript实现的类似Google的Div拖动程序，有个问题搞不懂，请大家帮忙看看啊

解决方案 »