「这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战」
实际项目上，为了能让页面更好看点，会加一些动画，使页面不会让人感觉太单调；也有这样的，人为去拖动某块东西，使它能在页面上移动，今天就来讲讲这个效果。
事件
如果要让物体可以拖拽，那么有三个事件是必不可少的，并且这三个事件的顺序还不能调换。
- onmousedown：鼠标左键按下时触发的事件
- onmousemove：鼠标移动时触发的事件
- onmouseup：鼠标松开时触发
原理
拖拽的原理就是让物体脱离文档流，然后在鼠标移动时，不停的改变它所定位的x、y的值。
实现
样式部分，定位这一点也是必不可少的，物体能在页面上乱跑主要就是靠它了。
<style>
#drag {
position: absolute;
}
</style>
<body>
<div id="drag"></div>
</body>
javaScript部分
window.onload = function() {
let drag = document.getElementById('drag');
drag.onmousedown = function( ev ) {
let event = ev || window.event;
let changeX = event.clientx - drag.offsetLeft;
let changeY = event.clienty - drag.offsetTop;
document.onmousemove = function( ev ) {
let eventMove = ev || window.event;
let moveX = eventMove.clientX - changeX;
let moveY = eventMove.clientY - changeY;
drag.style.left = moveX + 'px';
drag.style.top = moveY + 'px';
}
ducument.onmouseup = function( ev ) {
docunment.onmousemove = null;
docunment.onmouseup = null;
}
}
}
从代码可以看出，对于我们要设置移动的物体，在样式上，先给它设置定位样式；首先，先拿到这个物体，给这个物体赋值一个点击事件，并获取到鼠标点击的位置离物体边缘的X轴距离changeX（鼠标离可视区域左边的X轴距离 - 物体离可视区域左边的X轴距离）和鼠标点击的位置离物体边缘的Y轴距离changeY（鼠标离可视区域左边的Y轴距离 - 物体离可视区域上边的Y轴距离）；当鼠标移动的时候，监听鼠标移动事件，获取鼠标移动后停止时，物体离可视区域X轴距离moveX（鼠标离可视区域左边的X轴距离 - 鼠标点击的位置离物体边缘的X轴距离changeX）和Y轴距离moveY（鼠标离可视区域上边的Y轴距离 - 鼠标点击的位置离物体边缘的Y轴距离）,然后利用所得的数据值改变物体的定位数据，即可改变物体的位置；最后将当松起鼠标时，将事件都给释放掉。
这样虽然可以移动了，但是有一个问题，就是这个物体它能被拖到可视区域外去；那我们要怎么设置它只能在可是区域里拖动呢。
if (moveX < 0) {
moveX = 0;
} else if (moveX > eventDo.innerWidth - drag.offsetWidth) {
moveX = eventDo.innerWidth - drag.offsetWidth;
}
if (moveY < 0) {
moveY = 0;
} else if (moveY > eventDo.innerHeight - drag.offsetHeight) {
moveY = eventDo.innerHeight - drag.offsetHeight;
}
我们需要在鼠标拖动物体的时候判断，当沿着可视区域的X轴区域移动时，往左移动时moveX不能小于0，往右移动时moveX不能大于可视区域的X轴长度减去物体的X轴长度；当沿着可视区域的Y区域移动式，亦是如此。
