比较常见的拖动层代码。（兼容FF）

困了睡觉去，下面是网上比较常见的拖动层代码，我自己也写了个，主要是IE下的cilentX/clinetY（FF下pageX/pageY）。
支持FF，简单的封装成类，当然了，具体用起来肯定还有问题，以后逐步再修改吧，先这些了。
明天开始准备切图和实现client地图和走路部分吧。

<! doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN" >
< html >
< head >
< title >  MapBox.htm  </ title >
< style > ...
body
{...}{
 margin:0px;
 font-size:12px;
 line-height:150%;
}

#mapbox
{...}{
 left:0px;
 top:0px;
 border:1px solid #cccccc;
 width:500px;
 height:525px;
 position:absolute;
 z-index:86;
}

#mapbox-title
{...}{
 left:500px;
 height:25px;
 background-color:#efefef;
 cursor:move;
}

</ style >
< script > ...
 function Drag_Class(id,left,top)
 ...{
  this.id = $(id);
  this.left = left;
  this.top = top;
  this.moveable = false;
 }
 Drag_Class.prototype.startDrag  = function(ev)
 ...{
  var obj = $(this.id);
        var ev=ev||window.event;
  this.mouse_x = ev.clientX||ev.pageX;
  this.mouse_y = ev.clientY||ev.pageY;
  this.obj_x = parseInt(obj.style.left.replace("px",""));
  this.obj_y = parseInt(obj.style.top.replace("px",""));
  this.moveable = true;
 }
 Drag_Class.prototype.Drag  = function(ev)
 ...{
  if (this.moveable)
  ...{
   var obj = $(this.id);
         var ev=ev||window.event;
   var ev_x = ev.clientX||ev.pageX;
   var ev_y = ev.clientY||ev.pageY;
   obj.style.left = this.obj_x + ev_x - this.mouse_x + "px";
   obj.style.top = this.obj_y + ev_y - this.mouse_y + "px";
  }
 }
 Drag_Class.prototype.stopDrag  = function()
 ...{
  if (this.moveable)
  ...{
   this.moveable = false;
  }
 }

 function $(str)
 ...{
  return document.getElementById(str);
 }

 function addEvent(elm, evType, fn, useCapture)...{
        if (elm.addEventListener)...{
            elm.addEventListener(evType, fn, useCapture);
            return true;
        } else if (elm.attachEvent)...{
            var r = elm.attachEvent("on"+evType, fn);
            return r;
        } else ...{
            alert("Handler could not be removed");
        }
    }
 function test()
 ...{
  var obj = $("mapbox");
  var obj_x = 50;
  var obj_y = 50;
  obj.style.left = obj_x + "px";
  obj.style.top = obj_y + "px";
  BoxDrag = new Drag_Class(obj.id, obj_x, obj_y);

  if (window.event == undefined)...{
   addEvent(obj, "mousedown", BoxDrag.startDrag, "setCapture()");
   addEvent(obj, "mousemove", BoxDrag.Drag, "setCapture()");
   addEvent(obj, "mouseup", BoxDrag.stopDrag, "releaseCapture()");
  }
  else
  ...{
   obj.onmousedown = BoxDrag.startDrag;
   obj.onmousemove = BoxDrag.Drag;
   obj.onmouseup = BoxDrag.stopDrag;
  }
 }
window.onload =function()
...{
 test();
}
</ script >
</ head >

< body >
  < div  id ="mapbox"  style ="left:0px;top:0px;" >
  < div  id ="mapbox-title" > MapBox Title < div >
  </ div >

</ body >
</ html >