好的，这次来看看用纯js如何实现拖拽运动。源码已上传到github,需要的可以下载 https://github.com/17714574361/drag . 想想怎么写呢，好的吧，我承认直接想对于像我这种刚入门的小白来说是不可能的，那么我们来画一个图,
drag1.png
图中，黑色的框表示浏览器，蓝色的框表示拥有定位元素的div，绿色的表示要拖拽的div，红色的点表示鼠标按下的位置
那么我们怎样才能拖拽它呢，没错，就是你想的这样，先按下鼠标左键，不松开，然后再移动鼠标即可，是不是很简单，那到底该怎么用代码实现呢？
当鼠标按下的时候，我们给绿色的div添加一个鼠标事件onmousedown
html代码
<body>
<div id="wrap">
<div id="box"></div>
</div>
</body>
css代码
#wrap {
width: 600px;
height: 500px;
border: 1px solid #ccc;
position: relative;
margin: 50px auto;
}
#box {
width: 100px;
height: 100px;
background: seagreen;
position: absolute;
left: 0;
top: 0;
}
js代码
window.onload = function () {
let box = $("box"); //相当于document.getElementById(id)，这是封装的函数
//给绿色的div添加onmousedown事件
box.onmousedown = function () {
}
}
然后在计算绿色div的left和top值即可，那么如何计算呢，看图：
drag2.png
我们先看如何计算left值（红线），
可以图中知道，橙线是蓝色div的offsetLeft，黑线是绿色div的offsetLeft，棕线是鼠标距离浏览器左边的距离。所以我们可以这样计算left值，先计算出鼠标到绿色div的左侧边缘的距离，然后才能计算出left值。top值的计算方法也是一样，我就步描述了。
window.onload = function () {
let box = $("box");
let wrap = $("wrap");
//给绿色的div添加onmousedown事件
box.onmousedown = function (ev) {
let e = ev || window.event;
//计算出鼠标按下的点到box的左侧边缘和上侧边缘
let restLeft = e.clientX - wrap.offsetLeft - box.offsetLeft;
let restTop = e.clientY - wrap.offsetTop - box.offsetTop;
//移动的时候计算left和top值，这样每次移动都会生效
box.onmousemove = function (ev) {
let e = ev || window.event;
//计算出left值和top值
let boxLeft = e.clientX - restLeft - wrap.offsetLeft;
let boxTop = e.clientY - restTop - wrap.offsetTop;
//设置left，top值
box.style.left = boxLeft + "px";
box.style.top = boxTop + "px";
}
}
}
好，那么问题就来了，div是可以拖拽，但是当拖拽速度过快，鼠标不在div上面时，就没法托拽了，此时，这样解决，将onmousemove事件的对象改为document即可，这样无论你多块都可以，div都会跟着一起移动。
好了，上面的问题是解决了，但是当鼠标松开的时候，div还是跟着一起移动，我们可以这样解决，我们给生个页面添加一个onmouseup事件，在inmouseup回掉函数里将onmousemove事件设为销毁，并将onmouseup事件销毁。代码
window.onload = function () {
let box = $("box");
let wrap = $("wrap");
//给绿色的div添加onmousedown事件
box.onmousedown = function (ev) {
let e = ev || window.event;
//计算出鼠标按下的点到box的左侧边缘和上侧边缘
let restLeft = e.clientX - wrap.offsetLeft - box.offsetLeft;
let restTop = e.clientY - wrap.offsetTop - box.offsetTop;
//移动的时候计算left和top值，这样每次移动都会生效
document.onmousemove = function (ev) {
let e = ev || window.event;
//计算出left值和top值
let boxLeft = e.clientX - restLeft - wrap.offsetLeft;
let boxTop = e.clientY - restTop - wrap.offsetTop;
//设置left，top值
box.style.left = boxLeft + "px";
box.style.top = boxTop + "px";
};
box.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
};
};
现在拖拽事件就实现了。
我们现在再增加一个需求，限时拖拽的范围，我们如何让被拖拽的div限定在wrap这个框内。其实这个很好实现，我们只需分别计算left，top的最大值和最小值。
drag3.png
window.onload = function () {
let box = $("box");
let wrap = $("wrap");
//给绿色的div添加onmousedown事件
box.onmousedown = function (ev) {
let e = ev || window.event;
//计算出鼠标按下的点到box的左侧边缘和上侧边缘
let restLeft = e.clientX - wrap.offsetLeft - box.offsetLeft;
let restTop = e.clientY - wrap.offsetTop - box.offsetTop;
//移动的时候计算left和top值，这样每次移动都会生效
document.onmousemove = function (ev) {
let e = ev || window.event;
//计算出left值和top值
let boxLeft = e.clientX - restLeft - wrap.offsetLeft;
let boxTop = e.clientY - restTop - wrap.offsetTop;
//限制范围
let maxLeft = wrap.offsetWidth - box.offsetWidth;
let maxTop = wrap.offsetHeight - box.offsetHeight;
let minLeft = 0;
let minTop = 0;
if (boxLeft < minLeft) {
boxLeft = minLeft;
}
if (boxLeft > maxLeft) {
boxLeft = maxLeft;
}
if (boxTop < minTop) {
boxTop = minTop;
}
if (boxTop > maxTop) {
boxTop = maxTop;
}
//设置left，top值
box.style.left = boxLeft + "px";
box.style.top = boxTop + "px";
};
box.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
return false;
};
};
现在我们是真的写完了。好，完结。我想说其实还有一个问题，就是兼容型问题，上面的代码带低版本IE中是会出问题的，问题就是如果拖拽范围之内有文字，低版本IE会选中文字，可能不会拖拽，那我们怎么解决呢。
针对IE这个问题有个处理方法就是使用setCapture方法在oBox元素和下面的元素中间添加了一个透明层
window.onload = function () {
let box = $("box");
let wrap = $("wrap");
//给绿色的div添加onmousedown事件
box.onmousedown = function (ev) {
let e = ev || window.event;
//计算出鼠标按下的点到box的左侧边缘和上侧边缘
let restLeft = e.clientX - wrap.offsetLeft - box.offsetLeft;
let restTop = e.clientY - wrap.offsetTop - box.offsetTop;
// 针对低版本IE的方法，setCapture方法在oBox元素和下面的元素中间添加了一个透明层
if (box.setCapture) {
box.setCapture();
}
//移动的时候计算left和top值，每次移动都会生效
document.onmousemove = function (ev) {
let e = ev || window.event;
//计算出left值和top值
let boxLeft = e.clientX - restLeft - wrap.offsetLeft;
let boxTop = e.clientY - restTop - wrap.offsetTop;
//限制范围
let maxLeft = wrap.offsetWidth - box.offsetWidth;
let maxTop = wrap.offsetHeight - box.offsetHeight;
let minLeft = 0;
let minTop = 0;
if (boxLeft < minLeft) {
boxLeft = minLeft;
}
if (boxLeft > maxLeft) {
boxLeft = maxLeft;
}
if (boxTop < minTop) {
boxTop = minTop;
}
if (boxTop > maxTop) {
boxTop = maxTop;
}
//设置left，top值
box.style.left = boxLeft + "px";
box.style.top = boxTop + "px";
};
box.onmouseup = function () {
//销毁onmousemove和onmouseup事件
document.onmousemove = null;
document.onmouseup = null;
// 去掉透明层
if (box.releaseCapture) {
box.releaseCapture();
}
};
//阻止浏览器默认行为
return false;
};
};
这下是真的写完了！！！！！！！！！！
源码已上传到github,需要的可以下载 https://github.com/17714574361/drag
网友评论