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

最新推荐文章于 2025-08-07 21:48:39 发布

lstup

最新推荐文章于 2025-08-07 21:48:39 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax 文章标签： function div javascript border class html

本文链接：https://blog.youkuaiyun.com/lstup/article/details/1414146

ajax 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种改进后的多对象拖动功能实现方案。通过JavaScript实现页面元素的动态拖拽，支持多个对象同时进行拖动操作，并详细展示了实现过程中的关键代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<!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>

</head>

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

</div>

<div id="mapbox_title2">MapBox Title</div>

</div>

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

}