概述

最近開發(fā)的項目中有一個分享的懸浮按鈕，這個按鈕遮擋了頁面信息，產(chǎn)品經(jīng)理跑過來問我，是否可以把這個按鈕做成可以拖拽的，研究了一下輕松實現(xiàn)了這個功能，這里分享給大家。這個項目是基于vue的公眾號網(wǎng)頁，所以是通過vue來實現(xiàn)的，給大家一個參考。先來看一看效果：

分析

「1. 技術(shù)點」

• 組件封裝
• 插槽
• 固定定位
• touchemove & mousemove 事件

「2. 實現(xiàn)思路」

• 首先封裝drag-view組件，組件本身只處理拖拽邏輯，組件內(nèi)容通過插槽由父組件傳入。
• 將drag-view設(shè)置為固定定位，然后在move事件中計算出left和top并賦值給drag-view即可。

「3. 處理計算」

top 和 left 值的計算比較簡單，我們只需要獲取到觸摸點的x、y坐標減去容器寬度、高度的一半即可，所以得出以下公式：

top???=?clientY?-?elHeight?/?2;
left??=?clientX?-?elWidth??/?2;

代碼實現(xiàn)

「1. 組件部分」

<template>
????<divclass="drag__wrapper"ref="dragRef":style="{top:pos.y+'px',?left:pos.x+'px'}"
????????@mousemove="onTouchMove"
????????@touchmove.stop="onTouchMove"
????>
????????<slot?/>
????div>
template>

<script>export?default?{props:?{position:?{type:?Object,default:?()?=>?({x:?300,y:?500,
????????????}),
????????},
????},
????data()?{return?{flags:?false,pos:?{x:?0,y:?0,
????????????},
????????};
????},
????mounted()?{//?設(shè)置默認值this.pos?=?{?...this.$props.position?};//?獲取容器元素的尺寸信息const?rect?=?this.$refs.dragRef.getBoundingClientRect();//?獲取容器元素尺寸的一半便于后面計算使用this.wrapperHalfWidth?=?rect.width?/?2;this.wrapperHalfHeight?=?rect.height?/?2;//?獲取屏幕的尺寸信息const?clientWidth?=document.body.clientWidth?||?document.documentElement.clientWidth;const?clientHeight?=document.body.clientHeight?||?document.documentElement.clientHeight;//?獲取拖拽元素在屏幕內(nèi)可拖拽的邊界值this.maxX?=?clientWidth?-?rect.width;this.maxY?=?clientHeight?-?rect.height;
????},methods:?{
????????onTouchMove(event)?{//?獲取觸點，兼容PC和移動端let?touch;if?(event.touches)?{
????????????????touch?=?event.touches[0];
????????????}?else?{
????????????????touch?=?event;
????????????}//?定位滑塊的位置this.pos.x?=?touch.clientX?-?this.wrapperHalfWidth;this.pos.y?=?touch.clientY?-?this.wrapperHalfHeight;//?處理邊界if?(this.pos.x?0)?{
????????????????this.pos.x?=?0;
????????????}?else?if?(this.pos.x?>?this.maxX)?{
????????????????this.pos.x?=?this.maxX;
????????????}
????????????if?(this.pos.y?0)?{
????????????????this.pos.y?=?0;
????????????}?else?if?(this.pos.y?>?this.maxY)?{
????????????????this.pos.y?=?this.maxY;
????????????}
????????????//?阻止頁面的滑動默認事件
????????????event.preventDefault();
????????},
????},
};
script>

<style>.drag__wrapper?{position:?fixed;
}style>

「2. 調(diào)用」

<template>
????<div?class="page?test?bg-light">
????????<p?class="tips">{{tips}}p>
????????<drag-view?:position="{x:?300,?y?:?500}">
????????????<div?class="box"?@click="onTap">客服div>
????????drag-view>
????div>
template>

<script>import?DragView?from?"../../components/DragView/DragView.vue";export?default?{
????data()?{return?{tips:?"",
????????};
????},methods:?{
????????onTap()?{this.tips?=?"點擊客服按鈕";
????????},
????},components:?{
????????DragView,
????},
};script>

<style?scoped="scoped"?lang="less">.tips?{text-align:?center;margin:?50px?0;color:?cornflowerblue;font-size:?22px;
}.box?{width:?50px;height:?50px;background:?cornflowerblue;border-radius:?50%;text-align:?center;line-height:?50px;color:?#ffffff;font-size:?16px;
}style>

提示：

調(diào)用drag-view組件時通過position屬性來設(shè)置拖拽按鈕的初始位置。

拖拽按鈕點擊事件直接在父組件定義即可。

結(jié)尾

好了，各位小伙伴，今天的分享就到這里啦，喜歡我文章的朋友可以點一波關(guān)注，您的關(guān)注與支持，是我唯一繼續(xù)的動力。

總結(jié)

以上是生活随笔為你收集整理的vue 悬浮按钮_Vue@哇！几行代码实现拖拽视图组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。