注意：盒子要脱离文档流。盒子移动的边界。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<style type="text/css">
body {
overflow: hidden;
}
#box {
width: 200px;
height: 200px;
background: red;
cursor: move;
position: absolute;
/* 使用绝对定位.让盒子脱离文档流.此处的相对定位是html */
top: 88px;
left: 33px;
}
</style>
<body>
<div id="box"></div>
<script type="text/javascript">
var box = document.querySelectorAll('#box')[0]
/* 获取要拖拽的元素，因为语法：querySelectorAll获
取到的是一个伪数组,所以后面要加一个[0] */
box.addEventListener('mousedown', down)
/* 给这个盒子添加绑定事件。语法： `元素.addEventListener('事件类型'， 事件处理函数， 冒泡还是捕获)
此处表示给这个盒子添加一个鼠标移动事件，然后执行down这个函数*/
// 获取当前视窗的宽度和高度，可自行更换实际容器的宽高
// 计算盒子拖拽的边界值 边界值需要减去盒子的宽高
let cw = document.documentElement.clientWidth - box.offsetWidth,
ch = document.documentElement.clientHeight - box.offsetHeight
function down(e) {
//当前盒子距离容器的左偏移量
this.startL = this.offsetLeft
console.log(this.startL) //此时鼠标点击这个盒子的时候会打印，当前盒子距离容器右边的偏移量
//当前盒子距离容器的上偏移量
this.startT = this.offsetTop
//鼠标按下时的位置
this.startX = e.clientX
console.log(this.startX) //此时鼠标点击盒子的时候，会打印出鼠标在盒子不同位置的x的坐标
this.startY = e.clientY
//使用bind改变this指向，使其指向box，将鼠标运动的事件绑定给盒子
this.move = move.bind(this) //此时鼠标运动的时候盒子也会同时运动
this.up = up.bind(this) //此时鼠标抬起的时候，盒子也会同时停止运动
//鼠标按下后给document绑定mousemove以及mouseup事件
document.addEventListener('mousemove', this.move) //当鼠标移动时，执行下面的move函数
document.addEventListener('mouseup', this.up) //当鼠标抬起时，执行下面的up函数
}
function move(e) {
// 定义变量：用当前鼠标的位置 - 初始的鼠标位置 + 盒子的宽度/高度
let curL = e.clientX - this.startX + this.startL,
curT = e.clientY - this.startY + this.startT
console.log(curL)
// 边界值判断
curL = curL < 0 ? 0 : (curL > cw ? cw : curL) //三元表达式，如果盒子的边界小于0，则让他等于0，如果不小于0，则继续进行下面的三元表达式
curT = curT < 0 ? 0 : (curT > ch ? ch : curT)
this.style.cssText = `top:${curT}px;left:${curL}px` //拼接字符串
}
function up(e) {
//鼠标抬起，document解绑事件
document.removeEventListener('mousemove', this.move)
document.removeEventListener('mouseup', this.up)
}
</script>
</body>
</html>