原生js拖放一个元素的原理和思路
时间：2023-03-28 19:32:00
HTML
今天早上看到一个前端面试题目《利用原生js实现元素拖拽》，突然想到学习offsetclentscroll位置的三个人做的一个案例“实现拖放框”，于是就拿出来写了今天又来了，记录为Blog，一方面加深记忆，另一方面对nativejs更加熟悉（我很喜欢nativejs）项目），首先要列出业务逻辑和思路，简而言之就是工作大纲：完成页面的DOM构建，准备必要的样式。将鼠标压在方块上并移动，使方块跟随鼠标移动，松开鼠标时，取消鼠标按下及其后续事件。接下来我们一步步执行：csspart:*{margin:0;填充：0；}.box{位置：相对；/*也可以使用绝对定位*/width:500px;高度：300px；背景颜色：#5f5f5f;}html部分：
js部分：constbox=document.getElementById('box')box.onmousedown=function(e){//处理IE浏览e=e||e.event//鼠标按下时获取鼠标在方框内的偏移位置startX和startYletstartX=e.offsetX,startY=e.offsetY//在方框上监听鼠标移动事件this.onmousemove=function(e){//处理IE浏览器事件兼容性问题e=e||e.event//计算框的left和top属性（框必须定位在文档流之外）//此时框的水平偏移位置为：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}其实就是鼠标拖动一个元素的原理在页面上移动是：当鼠标移动时，让方框也移动相同的距离（X轴和Y轴），也就是说鼠标和方框的某一点是相对静止的。经过等价代入，我们可以知道其实就是盒子的左边和左边。top值=鼠标移动的距离+框的原始偏移距离和鼠标移动的距离=当前（实时）鼠标在框内的offsetX-鼠标第一次点击那一刻的offsetX（我存了在中间上方的变量startX中）
