说到拖拽,我们要知道的三大事件
- onmousedown(鼠标按下选择元素)
- onmousemove(按住鼠标移动元素)
- onmousedown(鼠标松开释放元素)
接下来我们来看一个小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
// 在盒子上按下
box.onmousedown = function (ev) {
var ev = ev || event;
var disX = ev.pageX - box.offsetLeft; // 鼠标到盒子的距离
var disY = ev.pageY - box.offsetTop;
// 在盒子上移动
box.onmousemove = function (ev) {
var ev = ev || event;
var l = ev.pageX - disX;
var t = ev.pageY - disY;
box.style.left = l + 'px';
box.style.top = t + 'px';
}
// 抬起
box.onmouseup = function () {
box.onmousemove = null;
box.onmouseup = null;
}
}
</script>
</body>
</html>
在移动元素的过程中,速度越快,元素会突然被带跑偏,跟不上鼠标移动的速度,这该怎么解决呢?
这是因为要操作的元素是box,只有