首頁 > web前端 > js教程 > Jquery寫一個滑鼠拖曳效果實現原理與程式碼_jquery

Jquery寫一個滑鼠拖曳效果實現原理與程式碼_jquery

WBOY
發布: 2016-05-16 17:45:53
原創
1031 人瀏覽過

近日專案中要做一個滑鼠拖曳層的效果,於是手動使用Jquery做了一個,發出來跟大夥兒分享一下,並希望能得到高手的指點,如果哪位大俠覺得我的思路和代碼不正確或是需要改進的話,希望能指點一二,在下感激不盡。

我的思路是這樣的

1、在滑鼠按下的時候,捕捉滑鼠的當前位置;

2、得到要移動物件的當前位置資訊;

3、滑鼠移動時,計算滑鼠移動的距離,將這個距離更新到物件的位置,在我的程式碼中,我試用絕對定位來表示物件的位置;

4、當滑鼠移出物件或滑鼠彈起的時候,則認為物件處於不能移動的狀態。這個在我的程式碼中使用一個bool類型的變數isMouseDown表示,當這個變數為true的時候,則表示物件處於可移動狀態,如果為false的時候,表示物件處於不可移動狀態。滑鼠移出物件或彈出的時候,就將isMouseDown置為false。

好了,思路就是這樣,下面將代碼貼出來,如果我的思路中表達的不清楚的話,可以在代碼中看出來:

複製代碼 代碼如下:




使用滑鼠拖曳層程式碼






滑鼠放在這裡拖曳我


可以使用滑鼠拖曳的層





相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板