vue实现移动端拖拽悬浮按钮

3403771864 发布于2022-09-13 21:29 / 1719人阅读

　　移动端拖拽悬浮按钮如何用vue实现，下面看看具体内容：

　　功能介绍：

　　开发中，要考虑用户体验，悬浮按钮不仅要显示在侧边，更是可以允许随意拖拽换位。

　　需求描述：

　　1、按钮悬浮显示在页面侧边；

　　2、当手指长按左键按钮，即可允许拖拽改变位置；

　　3、按钮移动结束，手指松开，计算距离左右两侧距离并自动移动至侧边显示；

　　4、移动至侧边后，按钮根据具体左右两次位置判断改变现实样式；

　　整体思路：

　　1、按钮实行position:fixed布局，在页面两侧最上层悬浮显示；

　　2、手指长按可使用定时器来判断，若手指松开，则关闭定时器，等待下次操作再启用；

　　3、跟随手指移动计算按钮与页面两侧的距离，判断手指松开时停留的位置；

　　效果展示：

　　具体实现：

　　一、position:fixed布局：

　　使用定位实现

　　<!-- 外层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事件，使用定时器实现长按效果：

<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毫秒就移动则不触发长按，清空定时器
　　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>

以上就是相关内容，请大家继续关注。

云服务器 GPU云服务器 html5实现拖拽移动 js悬浮按钮实现拖拽 js实现数据拖拽

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/127698.html

react下移动端可吸附悬浮窗，悬浮球，悬浮按钮，支持拖动拖拽功能

摘要：基于实现的移动端的可吸附悬浮按钮预览地址移动端源码地址安装使用基于react实现的移动端的可吸附悬浮按钮预览地址(移动端)： 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下移动端可吸附悬浮窗，悬浮球，悬浮按钮，支持拖动拖拽功能

摘要：基于实现的移动端的可吸附悬浮按钮预览地址移动端源码地址安装使用基于react实现的移动端的可吸附悬浮按钮预览地址(移动端)： 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首页模板的动态UI界面配置，生成页面。趁着周末，整理一下当时所了解到的拖拽。文章会根据大家的反馈或者自己学习经验的累积成长不定期更新丰富。如果你想了解更多PC端的拖拽开发，欢迎点赞关注或者收藏一波[鞠躬]。之前在掘金一篇文章里看到这段话: UI 开发的三种模式 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