元 素 的 最 终 位 置 = 元 素 的 初 始 位 置 + 鼠 标 的 距 离 差 元素的最终位置 = 元素的初始位置 + 鼠标的距离差 元素的最终位置=元素的初始位置+鼠标的距离差
html代码:
<div id="box"></div>
css代码:
<style>
* {
padding: 0;
margin: 0;
}
#box {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: hotpink;
}
</style>
javascript代码:
<script>
window.onload = function() {
var box = document.getElementById('box');
// 鼠标按下
box.onmousedown = function(event) {
event = event || window.event;
// 初始位置
var elementStartX = box.offsetLeft
var elementStartY = box.offsetTop;
// 鼠标按下的初始位置
var mouseStartX = event.clientX;
var mouseStartY = event.clientY;
// 鼠标移动(此时document,不是box)
document.onmousemove = function(event) {
event = event || window.event;
// 鼠标移动后的位置
var mouseLastX = event.clientX;
var mouseLastY = event.clientY;
// 元素移动的距离差
var distanceX = mouseLastX - mouseStartX;
var distanceY = mouseLastY - mouseStartY;
// 元素的最终位置
var elementLastX = distanceX + elementStartX;
var elementLastY = distanceY + elementStartY;
// 设置css
box.style.left = elementLastX + 'px';
box.style.top = elementLastY + 'px';
}
// 鼠标松开(此时是document,不是box)
document.onmouseup = function(event) {
// pc端的onmousemove事件不会自动解绑,需要手动解绑
document.onmousemove = document.onmouseup = null;
}
}
}
</script>