随着时代的变化，JS的重要性变得越来越重要。js不仅可以制作网页（如扩展框架），还能做一些网页特效。这些效果不仅与PC兼容，而且与移动终端兼容。毕竟，他们是基于浏览器的，无关的平台。现在微软的Windows8系统的应用程序可以开发JS，和每个人都有时间去尝试。

现在，让我们的思路，JS实现这个功能和拖Div.。

1。捕捉老鼠的div MouseDown事件

2。捕获文件的MouseMove事件

三.取消活动

然后让我们看看代码：

复制代码代码如下所示：
函数拖动（id）{
函数（标志）{
返回document.getelementbyid（标志）；
}
$（ID）。onmousedown =功能（e）{
变量=文档；
var页{ {
事件：功能（EVT）{
VaR EV = EVT window.event | |；
返回EV；
}，
PageX：功能（EVT）{
var = this.event（EVT）；
返回e.pagex | |（e.clientx + document.body.scrollleft文件。身体。clientleft）；
}，
PageY：功能（EVT）{
var = this.event（EVT）；
返回e.pagey | |（e.clienty + document.body.scrolltop文件。身体。clienttop）；

}，
LayerX：功能（EVT）{
var = this.event（EVT）；
返回e.layerx e.offsetx | |；
}，
layery：功能（EVT）{
var = this.event（EVT）；
返回e.layery e.offsety | |；
}
}
var x = page.layerx（E）；
var y = page.layery（E）；
如果（DV。设置鼠标捕获是是是）{
Dv.setCapture（）；
}
如果（窗口。捕获事件）{
window.captureevents（Event.MOUSEMOVE Event.MOUSEUP |）；
}
d.onmousemove =功能（e）{
VaR Tx = page.pagex（E）- X；
无功即page.pagey（E）- Y；
dv.style.left = TX +PX；
dv.style.top =性+PX；
}
d.onmouseup =函数（）{
如果（DV。捕获释放）{
Dv.releaseCapture（）；
}
如果（窗口。释放已获取的事件）{
window.releaseevents（Event.MOUSEMOVE Event.MOUSEUP |）；
}
d.onmousemove = null；
d.onmouseup = null；
}
}
}


代码分析：

一

获取div对象
复制代码代码如下所示：
函数（标志）{
返回document.getelementbyid（标志）；
}

2。捕获文件MouseDown事件：

里面有这么一段代码：
复制代码代码如下所示：
var页{ {
事件：功能（EVT）{
VaR EV = EVT window.event | |；
返回EV；
}，
PageX：功能（EVT）{
var = this.event（EVT）；
返回e.pagex | |（e.clientx + document.body.scrollleft文件。身体。clientleft）；
}，
PageY：功能（EVT）{
var = this.event（EVT）；
返回e.pagey | |（e.clienty + document.body.scrolltop文件。身体。clienttop）；

}，
LayerX：功能（EVT）{
var = this.event（EVT）；
返回e.layerx e.offsetx | |；
}，
layery：功能（EVT）{
var = this.event（EVT）；
返回e.layery e.offsety | |；
}
}

在这种情况下获取鼠标事件，pagex，pagey获取鼠标坐标，到Map Control中，layery获取距离鼠标距离的div的边框。

还有一段代码：
复制代码代码如下所示：
如果（DV。设置鼠标捕获是是是）{
Dv.setCapture（）；
}
如果（窗口。捕获事件）{
window.captureevents（Event.MOUSEMOVE Event.MOUSEUP |）；
}

这是捕捉div的MouseMove和mouseup事件，不知道TX能在网上查。
三.文件的MouseMove和mouseup事件：
复制代码代码如下所示：
d.onmousemove =功能（e）{
VaR Tx = page.pagex（E）- X；
无功即page.pagey（E）- Y；
dv.style.left = TX +PX；
dv.style.top =性+PX；
}
d.onmouseup =函数（）{
如果（DV。捕获释放）{
Dv.releaseCapture（）；
}
如果（窗口。释放已获取的事件）{
window.releaseevents（Event.MOUSEMOVE Event.MOUSEUP |）；
}
d.onmousemove = null；
d.onmouseup = null；
}

TX，泰，是设置div坐标的最重要代码。

有些人可能会问为什么

x，y实际上是从鼠标距离到div边界的距离，如果你不切断它的话。

鼠标箭头的坐标与div的x和y坐标相同。拖动后，鼠标的位置将被保留到左上角。其效果是拖动后会移动。
复制代码代码如下所示：
如果（DV。捕获释放）{
Dv.releaseCapture（）；
}
如果（窗口。释放已获取的事件）{
window.releaseevents（Event.MOUSEMOVE Event.MOUSEUP |）；
}
d.onmousemove = null；
d.onmouseup = null；

上面的代码是取消文件的鼠标移动时，鼠标onmouseup事件后松开。

我们最近一直在学习JS，下面的新经验也会和大家分享。我希望和你一起学习进步。