怎么使用js实现模拟鼠标拖拽事件

本篇内容介绍了“怎么使用js实现模拟鼠标拖拽事件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

创新互联是一家专业提供讷河企业网站建设,专注与成都网站制作、成都做网站、HTML5建站、小程序制作等业务。10年已为讷河众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

这次的效果图如下：

我认为这个实验的难点是保持盒子和鼠标的相对位置不变，通过鼠标按下和移动来实现拖拽的效果

如何实现拖拽的效果呢？

我们需要用到三个函数： onmousedown、onmousemove、onmouseup，分别表示鼠标按下、鼠标移动、鼠标抬起

在鼠标按下的回调函数中，我们需要通过clientX和clientY获取鼠标的初始位置，通过offsetLeft和offsetTop获取盒子的初始位置，然后计算鼠标初始位置和盒子初始位置的差值；

在鼠标移动的回调函数中，我们需要根据鼠标的位置和之前计算得到的差值来获取盒子现在的位置，然后改变其left和top值，不要忘记将position设置为absolute（因为我就忘记了。。。)

在鼠标抬起的回调函数中，我们需要清除鼠标移动和鼠标抬起，通过将onmousemove和onmouseup值设置为null即可

还要注意！！！

鼠标移动函数和抬起函数均要写在鼠标按下函数中，因为我们是要在鼠标按下这个动作之后来设计之后的行为，而且很重要的一点是：

鼠标按下函数是p的，鼠标移动和鼠标抬起是document的

因为我们的意思并不是鼠标在p中移动，而是在整个页面移动

重点大概是这些了，下面是代码：