JavaScript有虚线框的拖动
分享一段代码实例，它实现了元素拖动效果。
在拖动的时候具有一个虚线框在移动，当松开鼠标虚线框消失，原来的元素会被放置于此。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
padding: 0;
margin: 0;
}
#box1 {
width: 100px;
height: 100px;
text-align:center;
line-height:100px;
background: yellow;
position: absolute;
cursor: move;
}
#box2 {
width: 100px;
height: 100px;
border: 1px dashed #000000;
position: absolute;
cursor: move;
}
</style>
<script>
window.onload = function() {
var box1 = document.getElementById("box1");
box1.onmousedown = function(event) {
var e = event || window.event;
var disX = e.clientX - box1.offsetLeft;
var disY = e.clientY - box1.offsetTop;
var maxL = document.documentElement.clientWidth - box1.offsetWidth;
var maxT = document.documentElement.clientHeight - box1.offsetHeight;
//创建一个新的div
var box2 = document.createElement("div");
box2.id = "box2";
box2.style.left = box1.offsetLeft + "px";
box2.style.top = box1.offsetTop + "px";
document.documentElement.appendChild(box2);
document.onmousemove = function (event) {
var e = event || window.event;
var l = e.clientX - disX;
var t = e.clientY - disY;
if (l <= 0) {
l = 0;
}
if (t <= 0) {
t = 0;
}
if (l >= maxL) {
l = maxL;
}
if (t >= maxT) {
t = maxT
}
box2.style.left = l + "px";
box2.style.top = t + "px";
};
box2.onmouseup = function() {
box1.style.left = box2.style.left;
box1.style.top = box2.style.top;
document.documentElement.removeChild(box2);
box2.onmousemove = null;
box2.onmouseup = null;
};
}
}
</script>
</head>
<body>
<div id="box1">前端教程网</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onload = function() {}，文档内容完全加载完毕再去执行函数中的代码。
（2）.var box1 = document.getElementById("box1")，获取id属性值为box1的元素对象。
（3）.box1.onmousedown = function(event) {}，为box1元素注册onmousedown事件处理函数。
（4）.var e = event || window.event，兼容所有浏览器的时间对象。
（5）.var disX = e.clientX - box1.offsetLeft，获取当前鼠标指针距离元素左侧的距离。
（6）.var disY = e.clientY - box1.offsetTop，获取当前鼠标指针距离元素上侧的距离。（7）.var maxL = document.documentElement.clientWidth - box1.offsetWidth，元素可以向右拖动的最大值。
（8）.var maxT = document.documentElement.clientHeight - box1.offsetHeight，元素可以向上拖动的最大值。
（9）.var box2 = document.createElement("div")，创建虚线框div元素。
（10）. box2.id = "box2"，设置虚线框div元素的id属性值。
（11）.box2.style.left = box1.offsetLeft + "px"，设置box2元素的left属性值
（12）.box2.style.top = box1.offsetTop + "px"，设置box2的top属性值。
（13）. document.documentElement.appendChild(box2)，将此box2添加的页面。
（14）.document.onmousemove = function (event) {
var e = event || window.event;
var l = e.clientX - disX;
var t = e.clientY - disY;
if (l <= 0) {
l = 0;
}
if (t <= 0) {
t = 0;
}
if (l >= maxL) {
l = maxL;
}
if (t >= maxT) {
t = maxT
}
box2.style.left = l + "px";
box2.style.top = t + "px";
}，将box2元素的可以拖动范围限定在浏览器客户区。
之所以将onmousemove 事件处理函数注册在document上是为了防止快速拖动导致鼠标脱离元素，失去拖动效果。
（15）.box2.onmouseup = function() {
box1.style.left = box2.style.left;
box1.style.top = box2.style.top;
document.documentElement.removeChild(box2);
box2.onmousemove = null;
box2.onmouseup = null;
},当鼠标松开的时候，将box1的位置设置为当前box2的位置。
然后删除box2，并解绑事件处理函数。
二.相关阅读:
（1）.document.getElementById()可以参阅document.getElementById()一章节。
（2）.onmousedown事件可以参阅JavaScript mousedown事件一章节。
（3）.clientX可以参阅JavaScript event.clientX一章节。
（4）.offsetLeft可以参阅offsetleft一章节。
（5）.clientWidth可以参阅clientWidth一章节。
（6）.offsetWidth可以参阅js offsetWidth一章节。
（7）.document.createElement()可以参阅document.createElement()一章节。
（8）.appendChild()可以参阅appendChild()一章节。
（9）.onmousemove事件可以参阅javascript mousemove事件一章节。
（10）.onmouseup事件可以参阅javascript mouseup事件一章节。
（11）.removeChild()可以参阅javascript removeChild()一章节。
JavaScript有虚线框的拖动，这样的场景在实际项目中还是用的比较多的，关于JavaScript有虚线框的拖动就介绍到这了。
JavaScript有虚线框的拖动属于前端实例代码，有关更多实例代码大家可以查看。