JavaScript实现可拖动DIV的完整教程

随着Web技术的发展，JavaScript的重要性日益凸显。它不仅能用于构建Ext等复杂Web页面，还能实现丰富的Web特效。这些特效具有良好的跨平台兼容性，既支持PC端浏览器，也适配移动端设备，因为它们是基于浏览器环境运行的，与具体操作系统无关。目前，甚至微软Windows 8系统的App开发也支持使用JavaScript，有兴趣的开发者可以尝试。

JavaScript实现可拖动DIV的核心思路

接下来进入主题，介绍如何使用JavaScript实现可拖动的DIV元素。实现这一功能的核心思路如下：

第一步，捕获鼠标在DIV元素上的mousedown事件。

第二步，监听document对象的mousemove事件。

第三步，在鼠标松开时取消相关事件监听。

下面通过具体代码展示实现过程。

function Drag(id) {
var $ = function (flag) {
return document.getElementById(flag);
            }
$(id).onmousedown = function (e) {
var d = document;
var page = {
event: function (evt) {
var ev = evt || window.event;
return ev;
                    },
pageX: function (evt) {
var e = this.event(evt);
return e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);
                    },
pageY: function (evt) {
var e = this.event(evt);
return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);
},
 layerX: function (evt) {
 var e = this.event(evt);
 return e.layerX || e.offsetX;
 },
 layerY: function (evt) {
 var e = this.event(evt);
 return e.layerY || e.offsetY;
 }
 } 
 var x = page.layerX(e);
 var y = page.layerY(e); 
 if (dv.setCapture) {
 dv.setCapture();
 }
 else if (window.captureEvents) {
 window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
 }
 d.onmousemove = function (e) { 
 var tx = page.pageX(e) - x;
 var ty = page.pageY(e) - y;
 dv.style.left = tx + "px";
 dv.style.top = ty + "px";
 }
 d.onmouseup = function () {
 if (dv.releaseCapture) {
 dv.releaseCapture();
 }
 else if (window.releaseEvents) {
 window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
 }
 d.onmousemove = null;
 d.onmouseup = null;
 }
 }

代码详细分析与实现原理

代码详细分析：

1.

获取目标DIV对象。

var $ = function (flag) {
return document.getElementById(flag);
            }     

2. 捕获document的mousedown事件：

代码中包含以下关键部分：

var page = {
event: function (evt) {
var ev = evt || window.event;
return ev;
                    },
pageX: function (evt) {
var e = this.event(evt);
return e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);
                    },
pageY: function (evt) {
var e = this.event(evt);
return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);
},
 layerX: function (evt) {
 var e = this.event(evt);
 return e.layerX || e.offsetX;
 },
 layerY: function (evt) {
 var e = this.event(evt);
 return e.layerY || e.offsetY;
 }
 }

其中，event函数用于获取鼠标事件对象；pageX和pageY用于获取鼠标在页面中的坐标；layerX和layerY用于获取鼠标距离DIV边框的距离。

此外，还有一段处理事件捕获的代码：

if (dv.setCapture) {
dv.setCapture();
                }
else if (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                }

这段代码的作用是捕获DIV的MouseMove和MouseUp事件。具体原理可参考相关文档。

3. 处理document的MouseMove和mouseUp事件：

d.onmousemove = function (e) {
var tx = page.pageX(e) - x;
var ty = page.pageY(e) - y;
dv.style.left = tx + "px";
dv.style.top = ty + "px";
                }   
d.onmouseup = function () {
if (dv.releaseCapture) {
dv.releaseCapture();
                    }
else if (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                    }
d.onmousemove = null;
d.onmouseup = null;
                }

其中，tx和ty是关键变量，用于设置DIV的新坐标。

有人可能会问：为什么要减去x和y？

x和y表示鼠标点击位置距离DIV边框的偏移量。如果不减去这些值，

鼠标坐标会与DIV的x、y坐标直接对应，导致拖动后鼠标位置偏移至左上角，产生跳动效果。

if (dv.releaseCapture) {
dv.releaseCapture();
                    }
else if (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                    }
d.onmousemove = null;
d.onmouseup = null;

上述代码在鼠标松开后，取消document的onmousemove和onmouseup事件监听。

近期我一直在深入学习JavaScript，后续有新的心得体会会与大家分享，希望共同进步。