移動端的拖拽製作原理和 pc 端思路是一樣的。都是通過各自的api獲取事件的位置，然後求差，通過絕對定位來改變元素的位置。
寫前了解：移動端的三個事件touchstart touchmove touchend 分別對應移動端手指按下，移動，抬起。三個事件必須使用 dom 二級新增監聽。其中前兩個事件對應的方法是event.touches[0].clientx。最後乙個抬起對應的事件是 event.changedtouches[0].clientx。
實現思路：
手指按下移動通過event.touches[0].clientx 來取得手指的位置，兩者之間的差，就作為元素的偏移位置。需要注意的是最後一步抬起的事件裡面的內容。前面如果每次我們按下抬起就改變元素的位置，會發現元素已有的top 和 left 沒有記住，總是給盒子偏移位置。最後一步就是用來記住，按下抬起時，元素的位置，下次按下移動加上偏移位置作為元素的位置。
<
!doctype html>
"en"
>
"utf-8"
>
移動端的拖拽事件<
"天安門"
>
vue 移動端 拖拽
建立乙個div，因為是移動端的，所以用touchmove事件，觸發乙個函式。裡邊的span標籤是為了使用iconfont 上邊div裡有乙個動態繫結的style樣式，是因為給這個div加了定位，之後需要動態設定座標，為了簡單所以使用。這樣就需要在data中定義乙個 x軸 left y軸 top 初始...
移動端 拖拽元素
1 觸控元素 touchstart 獲取手指初始座標，同時獲得盒子原來的位置 2 移動手指 touchmove 計算手指的滑動距離，並且移動盒子 3 離開手指 touchend e.targettouches 0 pagex e.targettouches 0 pagey 這兩個為手指移動時 在頁面...
vuejs 移動端 實現div拖拽移動
本文講述，在使用vue的移動端實現類似於iphone的懸浮窗的效果。touchstart 當在螢幕上按下手指時觸發 touchmove 當在螢幕上移動手指時觸發 touchend 當在螢幕上抬起手指時觸發 mousedown mousemove mouseup對應的是pc端的事件 touchcanc...