拖拽要注意
解决鼠标焦点丢失问题
鼠标移动过快，会导致鼠标移出盒子，出现盒子和鼠标不同步，且在盒子外鼠标抬起，发现鼠标再次划入盒子，不点击鼠标盒子也仍然还会拖拽。
- IE/火狐 把盒子和鼠标绑在一起 调用元素的 setCapture()方法绑定 releaseCapture() 解绑
- 谷歌 鼠标不管移动多快 都跑不出浏览器 所以 mousemove/mouseup 绑定给 window
核心代码
<!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>* {padding: 0;margin: 0;}body {position: relative;height: 10000px;}#box {position: fixed;left: 200px;top: 200px;width: 100px;height: 100px;background-color: aqua;}</style>
</head><body><div id="box"></div><script>// 解决鼠标焦点丢失问题// IE/火狐 把盒子和鼠标绑在一起 调用元素的 setCapture()方法绑定 releaseCapture() 解绑// 谷歌 鼠标不管移动多快 都跑不出浏览器 所以 mousemove/mouseup 绑定给 windowconst box = document.querySelector("#box");// 获取屏幕宽度const HTML = document.documentElement;// 最大的 left 和 topconst maxLeft = HTML.clientWidth - box.offsetWidth;const maxTop = HTML.clientHeight - box.offsetHeight;// TODO 鼠标按下事件 且不能抬起 才能开始移动 鼠标抬起 停止拖拽const down = function down(event) {// 获取开始盒子的位置const { left, top } = this.getBoundingClientRect();// 将需要的数据挂载到对象上// 盒子起始的位置this.startLeft = left;this.startTop = top;// 鼠标在盒子上点击时的起始位置this.startX = event.clientX;this.startY = event.clientY;// 鼠标按下 绑定鼠标移动事件this._MOVE = move.bind(this)this._UP = up.bind(this)window.addEventListener("mousemove", this._MOVE);window.addEventListener("mouseup", this._UP);}// 鼠标移动 拖拽盒子事件const move = function (event) {// 获取盒子当前的 left toplet curLeft = event.clientX - this.startX + this.startLeft;let curTop = event.clientY - this.startY + this.startTop;// 边界判断 不能超出当前屏幕curLeft = curLeft < 0 ? 0 : curLeft > maxLeft ? maxLeft : curLeft;curTop = curTop < 0 ? 0 : curTop > maxTop ? maxTop : curTop;// 更新盒子的位置this.style.left = curLeft + "px";this.style.top = curTop + "px";}const up = function (event) {// 鼠标抬起 取消鼠标移动事件绑定window.removeEventListener("mousemove", this._MOVE);window.removeEventListener("mouseup", this._UP);}box.addEventListener("mousedown", down);</script>
</body></html>
