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

睡醒又改了改代码，更好的封装和调用，支持多个对象拖动。

 

<! 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
{...}{
    background-color:red;
    border:1px solid #cccccc;
    width:500px;
    height:525px;
    position:absolute;
    z-index:86;
}

#mapbox_title
{...}{
    padding:3px 0px 0px 10px;
    left:500px;
    height:25px;
    background-color:#efefef;
    cursor:move;
}
#mapbox2
{...}{
    background-color:blue;
    border:1px solid #cccccc;
    width:500px;
    height:525px;
    position:absolute;
    z-index:86;
}

#mapbox_title2
{...}{
    padding:3px 0px 0px 10px;
    left:500px;
    height:25px;
    background-color:#efefef;
    cursor:move;
}

</ style >
< script  language ="javascript"  src ="js/base.js" ></ script >
< script  language ="javascript"  src ="js/drag.js" ></ script >
</ head >
< script > ...
function SetupDrag(id)
...{
    var obj = $(id);
    //BoxDrag = new Drag_Class(id);
    eval("BoxDrag_" + id + " = new Drag_Class(id);");

    if (window.event == undefined)...{
        eval("addEvent(obj, "mousedown", BoxDrag_" + id + ".startDrag, "setCapture()");");
        eval("addEvent(obj, "mousemove", BoxDrag_" + id + ".Drag, "setCapture()");");
        eval("addEvent(obj, "mouseup", BoxDrag_" + id + ".stopDrag, "releaseCapture()");");
        /**//*
        addEvent(obj, "mousedown", BoxDrag.startDrag, "setCapture()");
        addEvent(obj, "mousemove", BoxDrag.Drag, "setCapture()");
        addEvent(obj, "mouseup", BoxDrag.stopDrag, "releaseCapture()");
        */
    }
    else
    ...{
        eval("obj.onmousedown = BoxDrag_" + id + ".startDrag;");
        eval("obj.onmousemove = BoxDrag_" + id + ".Drag;");
        eval("obj.onmouseup = BoxDrag_" + id + ".stopDrag;");
        /**//*
        obj.onmousedown = BoxDrag.startDrag;
        obj.onmousemove = BoxDrag.Drag;
        obj.onmouseup = BoxDrag.stopDrag;
        */
    }
}

window.onload = function()
...{
    SetupDrag("mapbox_title");
    SetupDrag("mapbox_title2");
}
</ script >

< body >
     < div  id ="mapbox"  style ="left:0px;top:0px;z-index:1" >
         < div  id ="mapbox_title" > MapBox Title </ div >
     </ div >
     < div  id ="mapbox2"  style ="left:200px;top:200px;z-index:1" >
     < div  id ="mapbox_title2" > MapBox Title </ div >
     </ div >
< script >
</ script >
</ body >
</ html >

 Drag.js文件：

function  Drag_Class(id)
... {
    this.id = id;
}

Drag_Class.prototype.startDrag  =   function (ev)
... {
    var obj = $(this.id).parentNode;
    obj.style.zIndex += 100; 
    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)
... {
    var obj = $(this.id).parentNode;
    var ev=ev||window.event;
    var ev_x = ev.clientX||ev.pageX;
    var ev_y = ev.clientY||ev.pageY;
    if (this.moveable)
    ...{
        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)
    ...{
        var obj = $(this.id).parentNode;
        this.moveable = false;
    }
}

Base.js文件：

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");
    }
}