<div class="box" style="width: 100px;height: 100px;background: red;position: absolute;">
</div>
<script>
var box = document.querySelector('.box')//需要鼠标按下事件onmousedown 移动事件onmousenove 松开事件onmouseup 所拖拽的块儿必须有定位属性
var boxX, boxY, offsetX, offsetY, mouX, mouY;
//立flag判断鼠标是否松开
var flag = false
//获取鼠标位置
function mouse(e) {
var x = 0, y = 0
e = e || window.event
console.log(e.pageX)
if (e.pageX) {
// x = e.pageX
// y = e.pageY
x = e.clientX + document.body.scrollLeft - document.body.clientLeft
y = e.clientY + document.body.scrollTop - document.body.clientTop
}
// else {
// x = e.clientX + document.body.scrollLeft - document.body.clientLeft
// y = e.clientY + document.body.scrollTop - document.body.clientTop
// console.log(clientX,document.body.scrollLeft,document.body.clientLeft)
// }
return {
x: x,
y: y
}
}
document.onmousedown = function (e) {
flag = true
//获取元素坐标
boxX = box.offsetLeft
boxY = box.offsetTop
console.log(boxX)
//获取鼠标坐标console.log( mouse(e).x,mouse(e).y)
mouX = mouse(e).x
mouY = mouse(e).y
// 鼠标相对元素左和上边缘的坐标
offsetX = mouX - boxX
offsetY = mouY - boxY
}
document.onmouseup = function (e) {
flag = false
}
document.onmousemove = function (e) {
if (flag) {
//鼠标移动后的坐标
var x = mouse(e).x - offsetX
var y = mouse(e).y - offsetY
console.log(x, y)
// // 计算可移动位置的大小, 保证元素不会超过可移动范围
// var width = document.documentElement.clientWidth - box.offsetWidth
// var height = document.documentElement.clientHeight - box.offsetHeight
// // min方法保证不会超过右边界,max保证不会超过左边界
// x = Math.min(Math.max(0, x), width)
// y = Math.min(Math.max(0, y), height)
box.style.left = x + 'px'
box.style.top = y + 'px'
}
}
</script>