類似手機上桌面的小氣泡，可隨意拖動
1：首先在vue的公共元件中（components）新建個元件
<
!-- 拖拽滑動 --
>
"default_drag_comp"
@click=
"gonext"
@touchstart=
"down"
@touchmove=
"move"
@touchend=
"end"
>
"'tel:' + storeitems"
>
="iconfont icon-kefu"
>
<
/span>
<
/a>
<
/div>
<
/template>
export
default
, nx:"",
ny:"",
dx:"",
dy:"",
xpum:"",
ypum:""}
;}, components:
, computed:
,mounted()
, methods:
,// 實現移動端拖拽
down()
else
this
.maxw = document.body.clientwidth - default_drag_comp.offsetwidth;
this
.maxh = document.body.clientheight - default_drag_comp.offsetheight;
this
.position.x = touch.clientx - default_drag_comp.offsetleft;
this
.position.y = touch.clienty - default_drag_comp.offsettop;
this
.dx = touch.clientx;
this
.dy = touch.clienty;},
move
(event)
else
this
.nx = touch.clientx -
this
.position.x;
this
.ny = touch.clienty -
this
.position.y;if(
this
.nx <0)
elseif(
this
.nx >
this
.maxw)if(
this
.ny <0)
elseif(
this
.ny >=
this
.maxh)
default_drag_comp.style.left =
this
.nx +
"px"
; default_drag_comp.style.top =
this
.ny +
"px"
;//阻止頁面的滑動預設事件；如果碰到滑動問題，1.2 請注意是否獲取到 touchmove
document.
addeventlistener
("touchmove"
,function()
,false);
}},//滑鼠釋放時候的函式
end()}
};<
/script>
vue 移動端 拖拽
建立乙個div，因為是移動端的，所以用touchmove事件，觸發乙個函式。裡邊的span標籤是為了使用iconfont 上邊div裡有乙個動態繫結的style樣式，是因為給這個div加了定位，之後需要動態設定座標，為了簡單所以使用。這樣就需要在data中定義乙個 x軸 left y軸 top 初始...
vue實現移動端觸屏拖拽功能
template div class floatball id floatball mousedown down touchstart.stop down mousemove move touchmove.stop move mouseup end touchend.stop end style 獎...
元素可拖拽（移動端與pc端）
專案中經常遇到這種需求，特此記錄下 css部分 html部分 js部分 這裡分了兩種情況，因為pc端與移動端的處理情況有點不太一樣 1 pc端 const winw window.innerwidth const winh window.innerheight const target docume...