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

目录

• 功能介绍：
• 大致需求：
• 整体思路：
• 具体实现：
• 一、position:fixed布局：
• 二、touch事件绑定：
• 三、页面引入：

本文实例为大家分享了vue实现移动端拖拽悬浮按钮的具体代码，供大家参考，具体内容如下

功能介绍：

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

大致需求：

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

整体思路：

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

简单效果展示：

具体实现：

一、position:fixed布局：

使用定位实现

    

    悬浮按钮
  

二、touch事件绑定：

应用到touchstart，touchmove，touchend事件，使用定时器实现长按效果：

    悬浮按钮

三、页面引入：

单个页面引入

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。