原生js实现一个元素拖拽的原理与思路
今天早上看到一个前端面试的题目《利用原生js实现元素拖拽》，突然就想到了当初学到offset clent scroll这位置三大家做的一个案例“实现拖拽盒子”
于是今天就又拿出来写了一下，并且记录成博客，一方面加深记忆，另一方面也再熟悉熟悉原生js（个人很喜欢很喜欢原生js）
首先，做一个项目之前（不管项目大小）都应当先罗列一下业务逻辑和思路，简而言之就是工作大纲：
- 完成页面DOM构建，并将必备样式准备完毕
- 鼠标在盒子上按下，并移动时应当让盒子跟随鼠标的移动而移动
- 鼠标松开时取消鼠标按下及其后续事件
css部分：
* {
margin: 0;
padding: 0;
}.box {
position: relative;
/* 定位用绝对absolute也可以 */
width: 500px;
height: 300px;
background-color: #5f5f5f;
}html部分：
js部分：
const box = document.getElementById('box')
box.onmousedown = function (e) {
// 处理IE浏览器事件兼容性问题
e = e || e.event
// 获取鼠标按下时此时鼠标位于box中的偏移位置startX和startY
let startX = e.offsetX,
startY = e.offsetY
// 在box上监听鼠标移动的事件
this.onmousemove = function (e) {
// 处理IE浏览器事件兼容性问题
e = e || e.event
// 计算box的left和top属性（box必须通过定位脱离文档流）
// 此时box的水平偏移位置就是：this.offsetLeft
// 此时鼠标在盒子中的水平偏移位置是：e.offsetX
// 鼠标按下瞬间获取到的鼠标偏移位置是：startX
// 记得最后一定要加上单位，不然不会发生偏移
this.style.left = this.offsetLeft + (e.offsetX - startX) + 'px'
this.style.top = this.offsetTop + (e.offsetY - startY) + 'px'
}
}
// 在盒子上鼠标左键抬起时监听的事件，将事件赋值为null与removeEventListener一样
box.onmouseup = function () {
this.onmousemove = null
}【原生js实现一个元素拖拽的原理与思路】其实鼠标拖拽一个元素在页面上移动的原理就是：
鼠标发生移动时，让盒子也移动相同的距离（X轴和Y轴），也就是说鼠标与盒子某一个点是相对静止的，等价代换之后我们就可以知道，其实就是
盒子的left和top值 = 鼠标移动的距离 + 盒子原本的偏移距离而鼠标移动的距离 = 当前（实时）鼠标在盒子中的offsetX - 鼠标最初点击那一瞬间的offsetX(上文中我将其存入了变量startX中)推荐阅读
- 一个人的旅行，三亚
- 一个小故事，我的思考。
- 一个人的碎碎念
- 七年之痒之后
- 我从来不做坏事
- 异地恋中，逐渐适应一个人到底意味着什么（）
- 迷失的世界（二十七）
- live|live to inspire 一个普通上班族的流水账0723
- 遗憾是生活的常态，但孝顺这件事，我希望每一个人都不留遗憾
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式