vuejs 移動端 實現div拖拽移動

2021-08-17 11:19:19 字數 990 閱讀 8882

本文講述,在使用vue的移動端實現類似於iphone的懸浮窗的效果。

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

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

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

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

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

(一)html

html結構:你的web頁面

懸浮div

>

"webid"

>

>

你的web頁面div

>

class

="xuanfu"

id="movediv"

@mousedown

="down()"

@touchstart

="down()"

@mousemove

="move()"

@touchmove

="move()"

@mouseup

="end()"

@touchend

="end()"

>

class

="yuanqiu"

>

11div

>

div>

div>

template

>

(二)js

Jquery移動端控制DIV拖拽

需求 車型配置表,移動端需要滑動,並且多項配置的表需要聯動對應頭部分類名稱 要求 左側 title 固定 頂部需要吸頂效果 處理方案 一開始打算使用table 但是發現不太好控制,後來就使用了div進行模擬了table 左側title 和 右側的 屬於兩部分結構。然後移動端的時候進行相對定位,控制右...

實現Div拖拽

直觀的理解div拖拽 當滑鼠對著可拖拽部分按住後並拖動,div會跟著滑鼠一起運動,並且其運動空間限制在瀏覽器內部,當放開滑鼠時,則div停止運動。實現div拖拽需要三個重要的事件 1 onmousedown 滑鼠按下事件 2 onmousemove 滑鼠移動事件 3 onmouseup 滑鼠抬起事件...

移動端拖拽模型

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