怎么实现鼠标拖动事件

学习前端的同学你们知道怎么实现鼠标拖动事件吗?不知道的话跟着小编一起来学习了解鼠标拖动事件。

鼠标拖动事件介绍

Javascript的mousemove事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时(至少移动1个像素)，就会触发mousemove事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢，以及浏览器跟踪更新的速度。

例如，接下来的一个例子就演示了如何综合应用各种鼠标事件来实现页面元素拖放操作的设计过程。在实现拖放操作的设计过程中，需要理清和解决以下几个问题：

定义拖放元素为绝对定位，以及设计事件的响应过程。这个实现比较容易。

清楚几个坐标概念：按下鼠标时的指针坐标，移动过程中当前鼠标的指针坐标，松开鼠标时的指针坐标，目标被拖动元素的元素坐标，拖动过程中的目标元素坐标。

算法设计：按下鼠标时，获取目标被拖动元素和鼠标指针的坐标位置，在移动过程中实时计算鼠标偏移的距离，并利用该偏移距离加上目标被拖动元素的原始坐标位置，获得目标被拖动元素的实时坐标位置。

如上图所示，其中变量ox和oy分别记录按下鼠标时目标被拖动元素的纵横坐标值，它们可以通过事件对象的offsetLeft和offsetTom属性获取。变量mx和my分别表示按下鼠标时，鼠标指针的坐标位置。而event.mx和event.my则是事件对象的自定义属性，用它们来存储当鼠标发生移动时鼠标指针的实时坐标位置。

当获取了上面3对坐标值之后，就可以动态计算目标被拖动元素的实时坐标位置，即x轴值为ox+event.mx-mx，y轴为oy+event.my-my。当松开鼠标时，则可以释放事件类型，并记录松开鼠标时鼠标指针拖动目标元素的坐标值，以及鼠标指针的位置，留待下一次做拖动操作时调用。