功能介绍：

在移动端开发中，实现悬浮按钮在侧边显示，为不遮挡页面内容，允许手指拖拽换位。

大致需求：

按钮在页面侧边悬浮显示；
手指长按按钮，按钮改变样式，允许拖拽改变位置；
按钮移动结束，手指松开，计算距离左右两侧距离并自动移动至侧边显示；
移动至侧边后，按钮根据具体左右两次位置判断改变现实样式；

整体思路：

按钮实行position:fixed布局，在页面两侧最上层悬浮显示；
手指长按可使用定时器来判断，若手指松开，则关闭定时器，等待下次操作再启用；
跟随手指移动计算按钮与页面两侧的距离，判断手指松开时停留的位置；

简单效果展示：

具体实现：

一、position:fixed布局：

使用定位实现

<!-- 外层ul控制卡片范围 -->
<div><div class="floatBtn" :class="[{moveBtn: longClick}, `${btnType}Btn`]"><span>悬浮按钮</span></div>
</div>

<style lang="scss" 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>

vue移动端拖拽悬浮按钮相关推荐

VUE PC端可拖动悬浮按钮改进
VUE PC端可拖动悬浮按钮改进之前发过一篇悬浮球的,但是那个不太好用,鼠标移动过快会脱标,就很难受,最近又改了一下,这是加了个监听,拖动结束的时候改变top和left,应该还能改进,欢迎大佬们提出 ...
Android 可拖拽悬浮按钮
转自http://www.jianshu.com/p/ba3e5fc5cff1 实现思路通过重写控件的onTouchEvent方法监听触摸效果. 通过View的setX()和setY()方法实现移动 ...
android可拖拽悬浮控件和Kotlin的可拖拽悬浮控件/可拖拽悬浮按钮带Demo附件
本文讲解的是一个实现了可拖拽的悬浮按钮,并添加了吸附边框的功能. 借鉴于:https://www.jianshu.com/p/4f55bcbc1b83 在此之前,先了解下其简单的使用方式吧: 原文地址 ...
Android 自定义可拖拽悬浮按钮
一.添加依赖 compile 'com.android.support:design:26.1.0' 后面的版本号要和 implementation 'com.android.support:appc ...
android 浮动按钮拖拽,小程序拖拽浮动按钮
小程序拖拽浮动按钮 2019-5-22 分类: 小程序小程序浮动拖拽按钮不借助movable-area自带的组件,实现拖拽效果 wxml + js: var startPoint; ...
html 可移动悬浮按钮,vue实现可移动的悬浮按钮
本文实例为大家分享了vue实现可随处移动悬浮按钮的具体代码,供大家参考,具体内容如下 1.html代码 class="callback float" @click="on ...
html 可移动悬浮按钮,vue悬浮按钮 vue实现可移动的悬浮按钮
想了解vue实现可移动的悬浮按钮的相关内容吗,丢失的蓝胖子在本文为您仔细讲解vue悬浮按钮的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue移动悬浮按钮,vue悬浮按钮,vue按钮,下 ...
可拖拽悬浮球，仿Assistive Touch弹出窗口
可拖拽悬浮球,仿Assistive Touch弹出窗口悬浮球 layout中使用DragFloatActionButton 最重要的事情!!!一定要给DragFloatActionButton设置点 ...
html手机模块化,jQuery 移动端拖拽（模块化开发，触摸事件，webpack）
通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). ...

vue移动端拖拽悬浮按钮

vue移动端拖拽悬浮按钮

功能介绍：

大致需求：

整体思路：

简单效果展示：

具体实现：

一、position:fixed布局：

二、touch事件绑定：

三、页面引入：

vue移动端拖拽悬浮按钮相关推荐

最新文章

热门文章