vue實現(xiàn)移動端拖拽懸浮按鈕

3403771864 發(fā)布于2022-09-13 21:29 / 1816人閱讀

　　移動端拖拽懸浮按鈕如何用vue實現(xiàn)，下面看看具體內容：

　　功能介紹：

　　開發(fā)中，要考慮用戶體驗，懸浮按鈕不僅要顯示在側邊，更是可以允許隨意拖拽換位。

　　需求描述：

　　1、按鈕懸浮顯示在頁面?zhèn)冗叄?/p>

　　2、當手指長按左鍵按鈕，即可允許拖拽改變位置；

　　3、按鈕移動結束，手指松開，計算距離左右兩側距離并自動移動至側邊顯示；

　　4、移動至側邊后，按鈕根據具體左右兩次位置判斷改變現(xiàn)實樣式；

　　整體思路：

　　1、按鈕實行position:fixed布局，在頁面兩側最上層懸浮顯示；

　　2、手指長按可使用定時器來判斷，若手指松開，則關閉定時器，等待下次操作再啟用；

　　3、跟隨手指移動計算按鈕與頁面兩側的距離，判斷手指松開時停留的位置；

　　效果展示：

　　具體實現(xiàn)：

　　一、position:fixed布局：

　　使用定位實現(xiàn)

　　<!-- 外層ul控制卡片范圍 -->
　　<div>
　　<div
　　:class="[{moveBtn: longClick}, `${btnType}Btn`]">
　　<span>懸浮按鈕</span>
　　</div>
　　</div>

　　<style scoped>
　　@mixin notSelect{
　　-moz-user-select:none; /*火狐*/
　　-webkit-user-select:none; /*webkit瀏覽器*/
　　-ms-user-select:none; /*IE10*/
　　-khtml-user-select:none; /*早期瀏覽器*/
　　user-select:none;
　　}
　　@mixin not-touch {
　　-webkit-touch-callout: none;
　　-webkit-user-select: none;
　　-khtml-user-select: none;
　　-moz-user-select: none;
　　-ms-user-select: none;
　　user-select: none;
　　}
　　.floatBtn {
　　@include notSelect;
　　@include not-touch();
　　position: fixed;
　　z-index: 1;
　　overflow: hidden;
　　width: 100px;
　　left: calc(100% - 100px);
　　top: calc(100% - 100px);
　　color: #E0933A;
　　background: #FCEBD0;
　　font-size: 14px;
　　height: 36px;
　　line-height: 36px;
　　text-align: center;
　　box-sizing: border-box;
　　display: flex;
　　justify-content: center;
　　align-items: center;
　　padding: 10px;
　　&.rightBtn {
　　border-radius: 20px 0 0 20px;
　　}
　　&.leftBtn {
　　border-radius: 0 20px 20px 0;
　　}
　　&.moveBtn {
　　border-radius: 20px;
　　}
　　}
　　</style>

　　二、touch事件綁定：

　　應用到touchstart，touchmove，touchend事件，使用定時器實現(xiàn)長按效果：

<div class="floatBtn"
　　:class="[{moveBtn: longClick}, `${btnType}Btn`]"
　　@touchstart="touchstart($event)"
　　@touchmove="touchMove($event)"
　　@touchend="touchEnd($event)"
　　>
　　<span>懸浮按鈕</span>
　　</div>

　　<script>
　　export default {
　　data() {
　　return {
　　timeOutEvent: 0,
　　longClick: 0,
　　// 手指原始位置
　　oldMousePos: {},
　　// 元素原始位置
　　oldNodePos: {},
　　btnType: 'right'
　　};
　　},
　　touchstart(ev) {
　　// 定時器控制長按時間，超過500毫秒開始進行拖拽
　　this.timeOutEvent = setTimeout(() => {
　　this.longClick = 1;
　　}, 500);
　　const selectDom = ev.currentTarget;
　　const { pageX, pageY } = ev.touches[0]; // 手指位置
　　const { offsetLeft, offsetTop } = selectDom; // 元素位置
　　// 手指原始位置
　　this.oldMousePos = {
　　x: pageX,
　　y: pageY
　　};
　　// 元素原始位置
　　this.oldNodePos = {
　　x: offsetLeft,
　　y: offsetTop
　　};
　　selectDom.style.left = `${offsetLeft}px`;
　　selectDom.style.top = `${offsetTop}px`;
　　},
　　touchMove(ev) {
　　// 未達到500毫秒就移動則不觸發(fā)長按，清空定時器
　　clearTimeout(this.timeOutEvent);
　　if (this.longClick === 1) {
　　const selectDom = ev.currentTarget;
　　// x軸偏移量
　　const lefts = this.oldMousePos.x - this.oldNodePos.x;
　　// y軸偏移量
　　const tops = this.oldMousePos.y - this.oldNodePos.y;
　　const { pageX, pageY } = ev.touches[0]; // 手指位置
　　selectDom.style.left = `${pageX - lefts}px`;
　　selectDom.style.top = `${pageY - tops}px`;
　　}
　　},
　　touchEnd(ev) {
　　// 清空定時器
　　clearTimeout(this.timeOutEvent);
　　if (this.longClick === 1) {
　　this.longClick = 0;
　　const selectDom = ev.currentTarget;
　　const {clientWidth, clientHeight} = document.body;
　　const {offsetLeft, offsetTop} = selectDom;
　　selectDom.style.left =
　　(offsetLeft + 50) > (clientWidth / 2) ?
　　'calc(100% - 100px)' : 0;
　　if (offsetTop < 90) {
　　selectDom.style.top = '90px';
　　} else if (offsetTop + 36 > clientHeight) {
　　selectDom.style.top = `${clientHeight - 36}px`;
　　}
　　this.btnType =
　　(offsetLeft + 50) > (clientWidth / 2) ?
　　'right' : 'left';
　　}
　　},
　　};
　　</script>

　　三、頁面引入：

　　單個頁面引入

　　<template>
　　<floatBtn/>
　　</template>

　　<script>
　　import floatBtn from './floatBtn';
　　export default {
　　components: {
　　floatBtn
　　},
　　};
　　</script>

以上就是相關內容，請大家繼續(xù)關注。

云服務器 GPU云服務器 html5實現(xiàn)拖拽移動 js懸浮按鈕實現(xiàn)拖拽 js實現(xiàn)數(shù)據拖拽

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/127698.html

react下移動端可吸附懸浮窗，懸浮球，懸浮按鈕，支持拖動拖拽功能

摘要：基于實現(xiàn)的移動端的可吸附懸浮按鈕預覽地址移動端源碼地址安裝使用基于react實現(xiàn)的移動端的可吸附懸浮按鈕預覽地址(移動端)： https://kkfor.github.io/suspe... 源碼地址： https://github.com/kkfor/susp... 安裝 npm install suspend-button -S 使用 import React, { Compo...

kun_jian 2019-08-23 16:57 評論0 收藏0
react下移動端可吸附懸浮窗，懸浮球，懸浮按鈕，支持拖動拖拽功能

摘要：基于實現(xiàn)的移動端的可吸附懸浮按鈕預覽地址移動端源碼地址安裝使用基于react實現(xiàn)的移動端的可吸附懸浮按鈕預覽地址(移動端)： https://kkfor.github.io/suspe... 源碼地址： https://github.com/kkfor/susp... 安裝 npm install suspend-button -S 使用 import React, { Compo...

張紅新 2019-08-29 18:36 評論0 收藏0
Vue2.0全家桶仿騰訊體育APP（Web版）

摘要：全家桶仿騰訊體育一年一度的總決賽，相信球迷用的最多的就是騰訊體育這款，剛好上手，當練手就把這個仿下來。這樣剛進去的時候頁面加載時間明顯減短。可以包含任意異步操作。 Vue2.0全家桶仿騰訊體育APP 一年一度的NBA總決賽，相信球迷用的最多的就是騰訊體育這款APP，剛好上手Vue，當練手就把這個APP仿下來。 showImg(https://segmentfault.com/img/r...

fnngj 2019-08-20 17:04 評論0 收藏0
可視化拖拽 UI 布局之拖拽篇

前言：前段時間負責公司的運營管理后臺項目，通過運營后臺的PC端拖拽配置布局，達到App首頁模板的動態(tài)UI界面配置，生成頁面。趁著周末，整理一下當時所了解到的拖拽。文章會根據大家的反饋或者自己學習經驗的累積成長不定期更新豐富。如果你想了解更多PC端的拖拽開發(fā)，歡迎點贊關注或者收藏一波[鞠躬]。之前在掘金一篇文章里看到這段話: UI 開發(fā)的三種模式 1.手寫標簽和樣式代碼，生成頁面 2.可視化拖拽 ...

ACb0y 2019-08-22 13:58 評論0 收藏0
js仿蘋果懸浮可拖拽按鈕，并且點擊展開效果

摘要：今天寫了一個仿蘋果的懸浮按鈕，由于只在右側展開，所以只能上下拖拽，展開效果入下拖拽如果這個元素的位置內只有一個手指的話阻止瀏覽器默認事件，重要超過頂部超過底部今天寫了一個仿蘋果的懸浮按鈕，由于只在右側展開，所以只能上下拖拽，展開效果入下 showImg(https://segmentfault.com/img/bVZgLZ?w=376&h=404);1.html ...

h9911 2019-08-02 15:58 評論0 收藏0