學(xué)習(xí)前端的同學(xué)你們知道怎么實(shí)現(xiàn)鼠標(biāo)拖動(dòng)事件嗎?不知道的話跟著學(xué)習(xí)啦小編一起來(lái)學(xué)習(xí)了解鼠標(biāo)拖動(dòng)事件。

　　鼠標(biāo)拖動(dòng)事件介紹

　　Javascript的mousemove事件類型是一個(gè)實(shí)時(shí)響應(yīng)的事件，當(dāng)鼠標(biāo)指針的位置發(fā)生變化時(shí)(至少移動(dòng)1個(gè)像素)，就會(huì)觸發(fā)mousemove事件。該事件響應(yīng)的靈敏度主要參考鼠標(biāo)指針移動(dòng)速度的快慢，以及瀏覽器跟蹤更新的速度。

　　例如，接下來(lái)的一個(gè)例子就演示了如何綜合應(yīng)用各種鼠標(biāo)事件來(lái)實(shí)現(xiàn)頁(yè)面元素拖放操作的設(shè)計(jì)過(guò)程。在實(shí)現(xiàn)拖放操作的設(shè)計(jì)過(guò)程中，需要理清和解決以下幾個(gè)問(wèn)題：

　　定義拖放元素為絕對(duì)定位，以及設(shè)計(jì)事件的響應(yīng)過(guò)程。這個(gè)實(shí)現(xiàn)比較容易。

　　清楚幾個(gè)坐標(biāo)概念：按下鼠標(biāo)時(shí)的指針坐標(biāo)，移動(dòng)過(guò)程中當(dāng)前鼠標(biāo)的指針坐標(biāo)，松開鼠標(biāo)時(shí)的指針坐標(biāo)，目標(biāo)被拖動(dòng)元素的元素坐標(biāo)，拖動(dòng)過(guò)程中的目標(biāo)元素坐標(biāo)。

　　算法設(shè)計(jì)：按下鼠標(biāo)時(shí)，獲取目標(biāo)被拖動(dòng)元素和鼠標(biāo)指針的坐標(biāo)位置，在移動(dòng)過(guò)程中實(shí)時(shí)計(jì)算鼠標(biāo)偏移的距離，并利用該偏移距離加上目標(biāo)被拖動(dòng)元素的原始坐標(biāo)位置，獲得目標(biāo)被拖動(dòng)元素的實(shí)時(shí)坐標(biāo)位置。

　　如上圖所示，其中變量ox和oy分別記錄按下鼠標(biāo)時(shí)目標(biāo)被拖動(dòng)元素的縱橫坐標(biāo)值，它們可以通過(guò)事件對(duì)象的offsetLeft和offsetTom屬性獲取。變量mx和my分別表示按下鼠標(biāo)時(shí)，鼠標(biāo)指針的坐標(biāo)位置。而event.mx和event.my則是事件對(duì)象的自定義屬性，用它們來(lái)存儲(chǔ)當(dāng)鼠標(biāo)發(fā)生移動(dòng)時(shí)鼠標(biāo)指針的實(shí)時(shí)坐標(biāo)位置。

　　當(dāng)獲取了上面3對(duì)坐標(biāo)值之后，就可以動(dòng)態(tài)計(jì)算目標(biāo)被拖動(dòng)元素的實(shí)時(shí)坐標(biāo)位置，即x軸值為ox+event.mx-mx，y軸為oy+event.my-my。當(dāng)松開鼠標(biāo)時(shí)，則可以釋放事件類型，并記錄松開鼠標(biāo)時(shí)鼠標(biāo)指針拖動(dòng)目標(biāo)元素的坐標(biāo)值，以及鼠標(biāo)指針的位置，留待下一次做拖動(dòng)操作時(shí)調(diào)用。

鼠標(biāo)拖動(dòng)事件相關(guān)文章：

1.怎么使用jquery實(shí)現(xiàn)鼠標(biāo)停止移動(dòng)事件

2.如何設(shè)置鼠標(biāo)事件

3.java的鼠標(biāo)移動(dòng)事件

4.unity3d實(shí)現(xiàn)鼠標(biāo)拖拽旋轉(zhuǎn)