求助：浏览器中JavaScript实现控件的动态拖动？

给你个例子
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
/**说明：自动判断浏览器是否支持，运行此程序。
 *该函数由mousedown事件处理程序中调用它时，它允许用户拖动文档元素。
 *beginDrag()的第一个参数必须是一个文档元素，该元素用CSS position性质绝对定位。在style性质中，CSS性质的left和top
 *必须被明确地设置为像素值，第二个参数是与触发mousedown事件相关的事件对象。
 **/
function beginDrag(elementToDrag, event) {
 
 var x = parseInt(elementToDrag.style.left);
    var y = parseInt(elementToDrag.style.top); //计算一个点和鼠标点击(event.clientX,event.clientY)的位置之间的距离
    var deltaX = event.clientX - x;
    var deltaY = event.clientY - y;
    
 if (document.addEventListener) //是否支持2级ＤＯＭ事件模型
 {
  //document.write("该浏览器支持DOM L2事件模型");
  document.addEventListener("mousemove", moveHandler, true);
  document.addEventListener("mouseup", upHandler, true);
 }
 else if (document.attachEvent) //是否支持IE 5+事件模型
 {
  //document.write("该浏览器是IE5+, 不支持DOM L2事件模型");
  document.attachEvent("onmousemove",moveHandler);
  document.attachEvent("onmouseup",upHandler);
 }
 else  //ＩＥ　４事件模型
 { //在IE4我们不能使用attachEvent()方法，所以存储了以前赋予的处理程序后，
 　//直接赋予新的事件处理程序．这样还可以恢复旧的处理程序．
 　//注意：这同样依赖于事件气泡．
  //document.write("该浏览器是IE4");
  var oldmovehandler=document.onmousemove;
  var olduphandler=document.onmouseup;
  document.onmousemove=moveHandler;
  document.onmouseup=upHandler;
 } 
 //我们已经处理了该事件，不要让别的元素看到它。
 //Event接口还定义了两个方法，即stopPropagation()和preventDefault()
    
 if (event.stopPropagation)
 {
  event.stopPropagation();//stopPropagation()可以阻止事件从当前正在处理它的节点传播。
 }else{
  event.cancelBubble=true;
 }    if (event.preventDefault)
    {
  event.preventDefault();//preventDefault()阻止浏览器执行与事件相关的默认动作
 }else{
  event.returnValue=false;
 }
      //在2级DOM API中，可以调用preventDefault()方法，与在0级事件模型中返回false一样。（如自定义右键弹出窗口）    /**
  *这是在元素被拖动时捕捉mousemove事件的处理程序。
     **/
    function moveHandler(e) {
  //把元素移到当前的鼠标位置，根据初始鼠标点击的偏移量进行调整。
  if (!e) 
  {
   e=window.event;
  }
  elementToDrag.style.left = (e.clientX - deltaX) + "px";
  elementToDrag.style.top = (e.clientY - deltaY) + "px";  // And don't let anyone else see this event.
  //不要让别的元素看到该事件。
  if (e.stopPropagation)
  {
   e.stopPropagation();  //ＤＯＭ　　L2
  }else{
   e.cancelBubble=true; //IE
  }
    }
    /**
  *该处理程序将捕捉拖移结束时发生的mouseup事件。
     **/
    function upHandler(e) {  if (!e)
  {
   e=window.event;
  }
 
  //注销捕捉事件处理程序。
  if (document.removeEventListener)
  {
  document.removeEventListener("mouseup", upHandler, true);
  document.removeEventListener("mousemove", moveHandler, true);
  }
  else if (document.detachEvent)
  {
   document.detachEvent("onmouseup",upHandler);
   document.detachEvent("onmousemove",moveHandler);
  }else
  {
   document.onmouseup=olduphandler;
   document.onmousemove=oldmovehandler;
  }
  
  // 不要让该事件进一步传播。
  if (e.stopPropagation)
  {
   e.stopPropagation();
  }else
  {
   e.cancelBubble=true;
  }
 }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<!--定义要拖动的元素-->
<DIV style="position:absolute;left:100px;top:100px;border:solid black;">
<!-- 定义进行拖移的处理程序，注意onmousedown的性质 -->
<DIV style="border-bottom:dotted black;padding:3px;font-family:sans-setif;font-weight:bold;" onMouseDown="beginDrag(this.parentNode,event);">
DRAG ME!!!HELLO!
</DIV>
</DIV>
<INPUT style="position:absolute;left:200px;top:200px;" TYPE="button" onMouseDown="beginDrag(this,event);" value="可以移动的按钮">
</BODY>
</HTML>