<!DOCTYPE html>
<html>
<head>
<title>cdshi</title>
<style>
#box{
height: 200px;
width: 200px;
background-color: rosybrown;
position: absolute;
top: 0px;
left: 0px;
}
#farther {
height: 800px;
width: 800px;
border: 1px red solid;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="farther">
<div id="box">点击拖拽</div>
</div>
<script type="text/javascript">
window.onload = function() {
var box = document.getElementById("box")
var parent = box.parentElement
box.onmousedown = function(ev) {
let e = ev || window.event
// 计算鼠标按下的位置距离盒子边界的位置
let nowLeft = e.clientX - parent.offsetLeft - box.offsetLeft
let nowTop = e.clientY - parent.offsetTop - box.offsetTop
// 计算盒子移动的距离
document.onmousemove = function (e) {
let left = e.clientX - nowLeft - parent.offsetLeft
let top = e.clientY - nowTop - parent.offsetTop
// 在一定范围内拖拽
if (left<0) left = 0
if (top<0) top = 0
if (left >= (parent.clientWidth - box.clientWidth)) left = parent.clientWidth - box.clientWidth
if (top >= (parent.clientHeight - box.clientHeight)) top = parent.clientHeight - box.clientHeight
// 在一定范围内拖拽
box.style.left = left + 'px'
box.style.top = top + 'px'
}
// 鼠标抬起，清空鼠标其他事件
document.onmouseup = function () {
document.onmousemove = null
document.onmouseup = null
}
}
}
</script>
</body>
</html>
image.png
