怎么實現(xiàn)鼠標(biāo)拖動事件
學(xué)習(xí)前端的同學(xué)你們知道怎么實現(xiàn)鼠標(biāo)拖動事件嗎?不知道的話跟著學(xué)習(xí)啦小編一起來學(xué)習(xí)了解鼠標(biāo)拖動事件。
鼠標(biāo)拖動事件介紹
Javascript的mousemove事件類型是一個實時響應(yīng)的事件，當(dāng)鼠標(biāo)指針的位置發(fā)生變化時(至少移動1個像素)，就會觸發(fā)mousemove事件。該事件響應(yīng)的靈敏度主要參考鼠標(biāo)指針移動速度的快慢，以及瀏覽器跟蹤更新的速度。
例如，接下來的一個例子就演示了如何綜合應(yīng)用各種鼠標(biāo)事件來實現(xiàn)頁面元素拖放操作的設(shè)計過程。在實現(xiàn)拖放操作的設(shè)計過程中，需要理清和解決以下幾個問題：
定義拖放元素為絕對定位，以及設(shè)計事件的響應(yīng)過程。這個實現(xiàn)比較容易。
清楚幾個坐標(biāo)概念：按下鼠標(biāo)時的指針坐標(biāo)，移動過程中當(dāng)前鼠標(biāo)的指針坐標(biāo)，松開鼠標(biāo)時的指針坐標(biāo)，目標(biāo)被拖動元素的元素坐標(biāo)，拖動過程中的目標(biāo)元素坐標(biāo)。
算法設(shè)計：按下鼠標(biāo)時，獲取目標(biāo)被拖動元素和鼠標(biāo)指針的坐標(biāo)位置，在移動過程中實時計算鼠標(biāo)偏移的距離，并利用該偏移距離加上目標(biāo)被拖動元素的原始坐標(biāo)位置，獲得目標(biāo)被拖動元素的實時坐標(biāo)位置。
如上圖所示，其中變量ox和oy分別記錄按下鼠標(biāo)時目標(biāo)被拖動元素的縱橫坐標(biāo)值，它們可以通過事件對象的offsetLeft和offsetTom屬性獲取。變量mx和my分別表示按下鼠標(biāo)時，鼠標(biāo)指針的坐標(biāo)位置。而event.mx和event.my則是事件對象的自定義屬性，用它們來存儲當(dāng)鼠標(biāo)發(fā)生移動時鼠標(biāo)指針的實時坐標(biāo)位置。
當(dāng)獲取了上面3對坐標(biāo)值之后，就可以動態(tài)計算目標(biāo)被拖動元素的實時坐標(biāo)位置，即x軸值為ox+event.mx-mx，y軸為oy+event.my-my。當(dāng)松開鼠標(biāo)時，則可以釋放事件類型，并記錄松開鼠標(biāo)時鼠標(biāo)指針拖動目標(biāo)元素的坐標(biāo)值，以及鼠標(biāo)指針的位置，留待下一次做拖動操作時調(diào)用。
鼠標(biāo)拖動事件相關(guān)文章：