vue移動端寫的拖拽

2021-10-24 01:15:36 字數 893 閱讀 5724

相關知識點

touchstart 當在螢幕上按下手指時觸發

touchmove 當在螢幕上移動手指時觸發

touchend 當在螢幕上抬起手指時觸發

mousedown mousemove mouseup對應的是pc端的事件

touchcancel 當一些更高階別的事件發生的時候(如**接入或者彈出資訊)會取消當前的touch操作,即觸發 touchcancel。一般會在touchcancel時暫停遊戲、存檔等操作。

效果圖

你的web頁面<

/div>

="xuanfu" id=

"movediv"

@mousedown=

"down()" @touchstart=

"down()"

@mousemove.prevent.stop=

"move()"

@touchmove.prevent.stop=

"move()"

@mouseup=

"end()" @touchend=

"end()"

>

="yuanqiu"

>

11<

/div>

<

/div>

<

/div>

<

/template>

vue 移動端 拖拽

建立乙個div,因為是移動端的,所以用touchmove事件,觸發乙個函式。裡邊的span標籤是為了使用iconfont 上邊div裡有乙個動態繫結的style樣式,是因為給這個div加了定位,之後需要動態設定座標,為了簡單所以使用。這樣就需要在data中定義乙個 x軸 left y軸 top 初始...

vue移動端可拖拽功能

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

移動端拖拽模型

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