js原生代碼實現鼠標拖拽(超簡單)


首先先來看這一張圖

在這種圖中,盒子的大小為512px,並且margin-left:-250px margin-top:140px;並通過一些樣式讓其在中部顯示

這些樣式都不是重要的,這里加個margin是為了讓其出現拖拽的時候出現鼠標偏移,好做演示而已,不然margin:0 auto 就可以實現盒子的居中

首先通過offsetLeft的方法獲取到盒子的偏移值,然后在通過clientX,clientY獲取到鼠標的坐標,通過當前坐標減去offsetLeft的坐標就可以獲取鼠標在div里面的

具體數值,也就是鼠標應該在的地方

這個時候拖拽的時候回出現鼠標偏移的現象,沒錯,這是margin值搞的鬼,margin也是盒子的一部分,所有要獲取到鼠標在盒子里面的位置的話,加上的margin要減掉

減掉的margin要加上,這個是我根據思路得到的代碼,可以參考一下,大神請忽悠

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM