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

来源：互联网发布：mac 如何识别iphone 编辑：程序博客网时间：2024/05/29 16:22

困了睡觉去，下面是网上比较常见的拖动层代码，我自己也写了个，主要是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>

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-title">MapBox Title<div>

</div>

</body>

</html>