vue 移動端 拖拽

2021-10-07 11:22:52 字數 634 閱讀 9866

建立乙個div,因為是移動端的,所以用touchmove事件,觸發乙個函式。(裡邊的span標籤是為了使用iconfont)

上邊div裡有乙個動態繫結的style樣式,是因為給這個div加了定位,之後需要動態設定座標,為了簡單所以使用。

這樣就需要在data中定義乙個  x軸(left),y軸(top)初始化的乙個位置。

}同時上邊繫結了乙個移動事件觸發的函式是onmove,就需要在method中定義乙個函式

onmove(event)
樣式

到這裡這個元件就寫好了,直接**需要引**。

vue移動端可拖拽功能

類似手機上桌面的小氣泡,可隨意拖動 1 首先在vue的公共元件中 components 新建個元件 拖拽滑動 default drag comp click gonext touchstart down touchmove move touchend end tel storeitems iconf...

vue移動端寫的拖拽

相關知識點 touchstart 當在螢幕上按下手指時觸發 touchmove 當在螢幕上移動手指時觸發 touchend 當在螢幕上抬起手指時觸發 mousedown mousemove mouseup對應的是pc端的事件 touchcancel 當一些更高階別的事件發生的時候 如 接入或者彈出資...

移動端拖拽模型

移動端的拖拽製作原理和 pc 端思路是一樣的。都是通過各自的api獲取事件的位置,然後求差,通過絕對定位來改變元素的位置。寫前了解 移動端的三個事件touchstart touchmove touchend 分別對應移動端手指按下,移動,抬起。三個事件必須使用 dom 二級新增監聽。其中前兩個事件對...