<del id="okiey"></del>

#思考# 鼠標拖拽mousemove和移動端touchmove問題

Ashin 發布于2019-08-23 18:17 / 2438人閱讀

摘要：需求移動實現手指觸摸移動物體端實現鼠標拖拽物體實現移動端通過和事件實現時記錄手指按下的位置為為了方便描述移動時中獲取移動過程中的位置為計算此次移動的距離正或者負，將移動物體的絕對位置更新原始位置加上移動距離，更新的值。進入下一次移動事件

需求

移動實現手指觸摸移動物體

PC端實現鼠標拖拽物體

實現

移動端通過touchstart和touchmove事件實現

1、touchstart時記錄手指按下的位置 x=event.touch[0].pageX, y=event.touch[0].pageY,為A(為了方便描述)
2、移動時touchmove中獲取移動過程中的位置,為B
3、計算此次移動的距離C（正或者負），
4、將移動物體的絕對位置更新：原始位置加上移動距離，
5、更新A的值。進入下一次移動事件

管理端

1、mousedown時記錄手指按下的位置 x=event.clientX, y=event.clientY,為A(為了方便描述)
2、移動時touchmove中獲取移動過程中的位置,為B
3、計算此次移動的距離C（正或者負），
4、將移動物體的絕對位置更新：原始位置加上移動距離，
5、更新A的值。進入下一次移動事件

云服務器 GPU云服務器 html禁止鼠標拖拽鼠標移動移動鼠標隨鼠標移動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104989.html

前端基礎進階（十）：面向對象實戰之封裝拖拽對象

摘要：前面幾篇文章，我跟大家分享了的一些基礎知識，這篇文章，將會進入第一個實戰環節利用前面幾章的所涉及到的知識，封裝一個拖拽對象。不封裝對象直接實現利用原生封裝拖拽對象通過擴展來實現拖拽對象。 showImg(https://segmentfault.com/img/remote/1460000008699587); 前面幾篇文章，我跟大家分享了JavaScript的一些基礎知識，這篇文章，...

Eidesen 2019-08-21 18:31 評論0 收藏0
移動端點擊事件全攻略，這里的坑你知多少？

摘要：所以這種情況下是不符合點擊事件的定義的。，關于移動端的點擊事件總結完了，可能你都沒想到一個簡單的點擊事件會有那么多坑，如果你在工作中可能會涉及到移動端開發的話，相信這篇文章還是值得你點贊和收藏的，畢竟是踩了那么多坑的經驗總結。看標題的時候你可能會想，點擊事件有什么好說的，還寫一篇攻略？哈哈，如果你這么想，只能說明你too young to simple. 接觸過移動端開發的同學可能都...

Nosee 2019-08-19 18:36 評論0 收藏0
移動端點擊事件全攻略，這里的坑你知多少？

摘要：所以這種情況下是不符合點擊事件的定義的。，關于移動端的點擊事件總結完了，可能你都沒想到一個簡單的點擊事件會有那么多坑，如果你在工作中可能會涉及到移動端開發的話，相信這篇文章還是值得你點贊和收藏的，畢竟是踩了那么多坑的經驗總結。看標題的時候你可能會想，點擊事件有什么好說的，還寫一篇攻略？哈哈，如果你這么想，只能說明你too young to simple. 接觸過移動端開發的同學可能都...

microelec 2019-08-01 15:24 評論0 收藏0