睡醒又改了改代码,更好的封装和调用,支持多个对象拖动。
<!
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 >
< 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;
}
}
... {
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");
}
}
... {
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");
}
}