这段js拖动效果代码什么意思？

下面的是清晰板（一样代码）
    我用vs调整了一下.
<html>
<head>
<title >Null</title>
<style type="text/css">
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, img, dl, dt, dd, table, th, td, blockquote, fieldset, div, strong, label, em
{
margin: 0;
padding: 0;
border: 0;
}
ul, ol, li
{
list-style: none;
}
input, button
{
margin: 0;
font-size: 12px;
vertical-align: middle;
}
body
{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
margin: 0 auto;
}
#main div
{
position: absolute;
width: 250px;
height: 150px;
padding: 1px;
border: 1px solid #999;
cursor: pointer;
}
</style>
<script src="JS/jquery-1.4.2.js" type="text/javascript"></script>
<script src="JS/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
var a;
document.onmouseup=function(){//只要进入页面就触发？
  if(!a)return;//这个是不是说如果a不为underfind，则继续执行？
  document.all?a.releaseCapture():window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);//这句代码是不是说把兼容这个浏览器的语句赋给document.all.
  a="";
};
document.onmousemove=function (d){//进入页面就触发？

  if(!a) return;
  if(!d) d=event;
  a.style.left=(d.clientX-b)+"px";a.style.top=(d.clientY-c)+"px";给a的属性赋值？
};
function move(o,e){//e的实参为event代表什么？
  a=o;//既然a=o了，是不是上面给a的赋值全都没了？

  document.all?a.setCapture():window.captureEvents(Event.MOUSEMOVE);
  b=e.clientX-parseInt(a.style.left);//b没有声明var,是否为全局变量，那么他怎么会作用到所选择的div呢？
  c=e.clientY-parseInt(a.style.top);
  o.style.zIndex=getMaxIndex()+1;
}
function $(id)
{
return document.getElementById(id);
}
function getMaxIndex(){//给你选中的div赋值当前最大的zindex
  var index=0;
  var ds=$('main').getElementsByTagName('div');
  var l=$('main').getElementsByTagName('div').length;
  for (i=0;i<l;i++)
  {
if (ds[i].style.zIndex>index) index=ds[i].style.zIndex;
  }
  return index;
}
</script></head> <body >
<div>
  <div id="main">
  <div style="left: 200px; top: 100px;" onmousedown="move(this,event)">
  <img alt="www.163css.com" src="images/1.jpg" />
  </div>
  <div style="left: 500px; top: 100px;" onmousedown="move(this,event)">
  <img alt="www.163css.com" src="images/2.jpg" /></div>
  <div style="left: 800px; top: 100px;" onmousedown="move(this,event)">
  <img alt="www.163css.com" src="images/3.jpg" /></div>
  <div style="left: 200px; top: 300px;" onmousedown="move(this,event)">
  <img alt="www.163css.com" src="images/4.jpg" /></div>
  <div style="left: 500px; top: 300px;" onmousedown="move(this,event)">
  <img alt="www.163css.com" src="images/5.jpg" /></div>
  <div style="left: 800px; top: 300px;" onmousedown="move(this,event)">
  <img alt="www.163css.com" src="images/6.jpg" /></div>
  </div>
</div>

</body>
</html>
//一样的代码

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

现在我看这个代码好象写得不是很好！你是不是要Div 拖动？下面是我自已写的
贴子
 最后方案
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; margin:0 auto; }
#main div{position:absolute;width:250px;height:150px; padding:1px;border:1px solid #999; cursor:pointer;}
</style>
<div>  <div id="main">  <div style="left:200px;top:100px;" onMouseDown="move(this,event)"><img alt="www.163css.com" src="images/1.jpg" /></div>  <div style="left:500px;top:100px;" onMouseDown="move(this,event)"><img alt="www.163css.com" src="images/2.jpg" /></div>  <div style="left:800px;top:100px;" onMouseDown="move(this,event)"><img alt="www.163css.com" src="images/3.jpg" /></div>  <div style="left:200px;top:300px;" onMouseDown="move(this,event)"><img alt="www.163css.com" src="images/4.jpg" /></div>  <div style="left:500px;top:300px;" onMouseDown="move(this,event)"><img alt="www.163css.com" src="images/5.jpg" /></div>  <div style="left:800px;top:300px;" onMouseDown="move(this,event)"><img alt="www.163css.com" src="images/6.jpg" /></div>  </div>
</div><script type="text/javascript">

  var a;
document.onmouseup=function(){//只要进入页面就触发？//p2227:当document对象鼠标释放时执行

  if(!a)return;//这个是不是说如果a不为underfind，则继续执行？//p2227:a为空，为0，为undefined都不继续执行

  document.all?a.releaseCapture():window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);//这句代码是不是说把兼容这个浏览器的语句赋给document.all.
  //p2227:如果document.all存在（IE浏览器下才存在这个东西）则执行a.releaseCapture()，如果不存在，则执行window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
  /*
  p2227:相当于这样
  if(document.all){
a.releaseCapture();
  }else{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
  }
  */
  //p2227:这段语句里面没有赋值，赋值是这样的 v = ( v1 ? v1 : v2 )

  a="";
};
document.onmousemove=function (d){//进入页面就触发？//p2227:当document对象鼠标移动时执行

  if(!a) return;
  if(!d) d=event;
  a.style.left=(d.clientX-b)+"px";a.style.top=(d.clientY-c)+"px";//给a的属性赋值？//p2227:是，另外你打少了一个注释符号一开始这个网页全出错了。
};
function move(o,e){//e的实参为event代表什么？//p2227:浏览器内置的鼠标单击事件对象
  a=o;//既然a=o了，是不是上面给a的赋值全都没了？//p2227:不会，因为跟上面是另外一个函数，而且逻辑上是这个函数先执行的

  document.all?a.setCapture():window.captureEvents(Event.MOUSEMOVE);
  b=e.clientX-parseInt(a.style.left);//b没有声明var,是否为全局变量，那么他怎么会作用到所选择的div呢？
  c=e.clientY-parseInt(a.style.top);//p2227:b和c是全局对象，用于这个函数和document.onmousemove函数之间传值
  o.style.zIndex=getMaxIndex()+1;
}
function $(id){return document.getElementById(id);}
function getMaxIndex(){//给你选中的div赋值当前最大的zindex
  var index=0;
  var ds=$('main').getElementsByTagName('div');
  var l=$('main').getElementsByTagName('div').length;  for (i=0;i<l;i++)
  {
  if (ds[i].style.zIndex>index) index=ds[i].style.zIndex;
  }
  return index;
}

    /*
p2227:
这些代码是这样运行的，首先除了var a;以外都是在定义函数，不符合条件的话这些定义好的函数是不会执行的；
按下鼠标时执行了 move(o,e) o是当前鼠标按下的对象即当前的div，并且传给了全局变量a，再把相关需要传的参数给了全局变量b,c；
然后拖曳，即在文档的任意位置发生的鼠标，执行document.onmousemove，根据move(o,e)中设定的全局值，适应各种不同的浏览器而让a位置发生变化；
在文档的任意位置鼠标释放，执行document.onmouseup，结束拖曳事件并把全局变量a重置。别外，“只要进入页面就触发”是window.onload=function(){//some code}
*/
  </script>
少了几个字
然后拖曳，即在文档的任意位置发生的鼠标移动事件，执行document.onmousemove，根据move(o,e)中设定的全局值，适应各种不同的浏览器而让a位置发生变化；
上面的代码我不懂，我想要js实现一个小div套在一人大div里，小div可以在大div内随意拖动，小div活动范围不能在大div外，否则自动跳回原位,具体代码应该怎样写，十万火急，我会非常感激你的。
我们的页面载入用户点击的页面，并显示载入页面的title，这个怎么解决？求高手指点，最好是有代码，谢谢！