H5实现类似微信可拖拽左右吸边浮动按钮

于 2023-04-09 12:48:00 发布
阅读量600 收藏 1
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liaoxiaoxin/article/details/130040676
版权

H5实现类似微信可拖拽左右吸边浮动按钮

背景

之前项目需求产品经理要求实现一个可以实时拖拽的按钮，刚好我们移动端H5用的调试工具vconsole也有类似功能，于是研究了一下vconsole里面具体实现的源码，参考其中代码自己也实现了一个, 点击查看demo效果

然后在做另外一个需求的时候产品经理无意中看到我手机微信的那个可以拖拽并且可以自动左右吸附的浮窗按钮，说这个效果不错，就按照微信的这个效果来，于是在原来的那个基础上有实现了一个类似微信可拖拽左右吸边浮动按钮，点击查看demo效果

技术实现

其实实现这个功能所使用到的技术点并不难，主要是要处理边界情况和各种细节

实现实时拖拽功能技术点：

  • 移动端： 监听 touchstart、 touchmove、
最低0.47元/天 解锁文章
廖小新
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
h5页面全局悬浮按钮可点击、拖动、自动贴边
qq_41180882的博客
05-16 564
实现悬浮贴边，同时可以拖动，自动贴边图片下方带文字，可全局任意页面存在可以全局实现一个悬浮按钮。
h5可拖动悬浮按钮_html5 可拖动的悬浮按钮 （直接复制粘贴） 前后端不分离福利...
weixin_27240351的博客
12-23 859
Titlediv{width: 100px;height: 50px;position:fixed;background-color: red;border-radius:25px;}window.onload=function(){var flag = 0; //标记是拖曳还是点击var oDiv = document.getElementById('back-button');var disX...
H5 页面拖动悬浮按钮
weixin_46252229的博客
12-29 1051
悬浮按钮
h5可拖动悬浮按钮_要不要为App中的H5页面设计悬浮按钮入口？
weixin_28740399的博客
12-31 550
原标题：要不要为App中的H5页面设计悬浮按钮入口？有些app中，我们能见到悬浮按钮，有些app中见不到，通常是什么样的情况会出现悬浮按钮？常州app开发商咖咻给出的答案是：在app中，我们经常会做一些活动，像抽奖、转盘、签到、积分换购等，此时一般会用到h5，而h5通常会在首页上以一个悬浮按钮为入口。 在实际应用中，悬浮按钮一般出现在电商或泛在线交易产品中，因为它们搞的活动最多。但也不是每个活动都...
h5可拖动悬浮按钮_js实现悬浮窗效果(支持拖动)
weixin_39935571的博客
01-13 2130
经常可以看到大部分的官网有右侧悬浮在线客服。今天来写写！效果图：代码如下：js悬浮窗代码(支持拖动)*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}/* KeFuDiv */.KeFuDiv{position:absolute;height:160px;width:196px;background: #01C4C6;color:...
h5浮动按钮
weixin_33794672的博客
05-14 2560
2019独角兽企业重金招聘Python工程师标准>>> ...
H5(Vue)实现可拖拽悬浮图标
qq_40757399的博客
03-07 2488
H5上经常会有这样的需求，有一个悬浮的图标，常常需要在拖动时，拖拽到移动的位置。 /** * 核心思想为动态改变Dom节点的left与top * 1、创建Dom节点，节点动态绑定left、top； * 2、页面构建时，获取屏幕宽度、高度，通过计算赋予Dom节点初始化的left，top； * 3、监听touchstart，当移动开始时，清除之前的动画； * 4、监听touchmove，移动过程中，获取事件对象中touch[0]的clientX、clientY，此为当前touch的x、y坐标，减去D
h5输出文字位置_功能丰富好用 红旗H5多媒体系统体验
weixin_39600328的博客
12-08 192
易车原创作为新红旗品牌推出的首款中型轿车，红旗H5的登场受到了众多人群的关注。红旗H5这款轿车不仅在造型设计方面有了全新的变化，同时在科技配置方面也有着与时俱进的提升，我带大家感受一下H5的这套车载多媒体系统表现如何。我们选取的是全系车型中的顶配车型：2019款 30TD 智联御动版 指导价19.08万元。红旗H5定位中级轿车，其长宽高分别为4935/1840/1470mm，轴距为2870mm，车...
h5可拖动悬浮按钮_手机端H5悬浮按钮怎么实现的呢？
weixin_27442001的博客
12-23 1798
最近公司项目需要在H5页面上悬浮一个按钮，同时要求按钮是可以拖动的并且需要可以自动贴边，无奈前端小伙伴不怎么给力，无奈只能我顶上了。我觉得这种情况应该可以抽出一个组件，这次就仔细探讨一下悬浮按钮的实现原理吧。因为平时我在开发过程中，手机端的开发我都推荐公司小伙伴使用uniapp进行，这次的自然也是在uniapp的环境下开发的组件，uniapp本身使用了小程序rpx作为单位。对于之前从来没使用过的小...
HTML5(悬浮球)
03-15
试下手机的悬浮球,随时拖动,支持点击事件,在浏览器上运行后按F12进入到手机模式才可以看到效果
纯js实现悬浮按钮组件
10-20
主要为大家详细介绍了纯js实现悬浮按钮组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
uniapp(全端兼容) - 最新详细实现可拖动悬浮按钮功能，支持手指拖曳放到页面任意位置，uniapp可拖动的悬浮球，悬浮图标支持拖动效果（详细示例源码及注释，复制粘贴快速植入）
高级前端工程师
03-27 5333
使用uniapp实现全局悬浮按钮(可拖动)，uni-app 微信小程序实现全屏悬浮按钮可拖动,自动吸附边缘，uni-app悬浮(拖动)按钮组件，关于uniapp的拖动悬浮球，uniapp 实现悬浮球拖拽，uniapp vue H5悬浮在页面之上可随手指拖动组件，uniapp实现界面可任意拖动小图标，uniapp 悬浮球拖拽加回弹效果，uniapp全局可拖动悬浮球，uniapp小程序悬浮按钮，uniapp-movable 可拖动悬浮球，uniapp--悬浮可拖动按钮-实现思路，uniapp怎么实现一个悬浮按钮
web高仿樊登H5/微信音乐播放悬浮球效果
heyzqt
07-19 1465
这两天完成了一个仿樊登 H5 的音乐播放悬浮球效果，这个效果跟微信音乐播放悬浮球的效果也很相似，今天总结一下实现的思路过程（基于 Vue 实现）。 先来看看樊登 H5 的效果。 再来看看我的实现，挺完美的，哈哈。 实现起来也不复杂，主要是一步步想清楚下面的实现步骤： 第一步：小球被限制在固定范围内滑动 第二步：停止滑动时，小球吸边效果 第三步：点击吸边状态下的小球，变换为音频播放控制面板，点击毛玻璃，恢复成小球 第四步：背景毛玻璃效果 一步步来说。 第一步：小球被限制在固定范围内滑动 touchm
HTML5悬浮球源码,web高仿樊登H5/微信音乐播放悬浮球效果
weixin_35988178的博客
06-15 922
这两天完成了一个仿樊登 H5 的音乐播放悬浮球效果，这个效果跟微信音乐播放悬浮球的效果也很相似，今天总结一下实现的思路过程(基于 Vue 实现)。先来看看樊登 H5 的效果。再来看看我的实现，挺完美的，哈哈。实现起来也不复杂，主要是一步步想清楚下面的实现步骤：第一步：小球被限制在固定范围内滑动第二步：停止滑动时，小球吸边效果第三步：点击吸边状态下的小球，变换为音频播放控制面板，点击毛玻璃，恢复成小...
基于vue的h5 拖拽组件（ 吸边处理）
weixin_43824848的博客
06-16 1702
(1)自定义一个公共组件drag.vue <template> <div class="ball-page" ref="default_drag_comp" @click="goNext" @touchstart="down" @touchmove="move" @touchend="end" > <img :src="ball.icon" class="icon" /> <div class=
ios添加全局悬浮按钮_iOS - 添加一个全局悬浮按钮(集成pods版)
weixin_32143729的博客
12-23 185
背景介绍 ：在普通的iOS开发组中，一般测试机都不止一台，但是我们在开发的时候，不可能每台测试机时刻保持最新的代码，这就出现了一个问题，当测试测出问题的时候，(或者产品突然拿去点点看的时候出了问题)如果不知道当前的版本，可能不确定是什么时候出的问题。解决方案：如果当前环境是测试服的时候，展示一个全局浮动标签，这样不仅看到此标志就告诉测试(包括我们自己)当前的环境，当出现问题的时候，通过标签，可以快...
h5 右下角浮动按钮_Flutter 浮动按钮-FloatingActionButton的使用
weixin_42527178的博客
12-24 886
FloatingActionButton 简称 FAB ,可以实现浮动按钮，也可以实现类似闲鱼 app 的底部凸起导航 。常用属性属性说明child子视图，一般为 Icon，不推荐使用文字tooltip长按时显示的提示，也是无障碍功能foregroundColor前景色，影响到文字颜色backgroundColor背景颜色elevation未点击的时候的阴影hignlightElevation点击...
vue 手机端h5 可拖拽 悬浮按钮
qq_27312237的博客
12-28 1548
前言：借鉴的百度出来的一篇文章修改的，但是想记录一下的时候，找不到那篇文章了。仅做记录用： 单独写的一个悬浮按钮组件，在父组件中引入使用即可，样式可能还有些问题，在手机中还能够用。但是在pad之类的大屏幕设备上，位置和大小有些问题。后面再看看 。 isPad是为了处理pad设备上的按钮大小和位置的，不需要的话，需要删除一下全篇的isPad和三目运算符。 父组件中，import,components:{} <floatButton></floatButton> 就好了 &..
ios h5实现手机微信震动效果
最新发布
05-24
在 iOS 上，H5 实现手机微信震动效果可以通过 JavaScript 调用系统 API 实现。具体方法如下： 1. 首先需要引入 `JavaScriptCore` 框架。 2. 在 JavaScript 中调用以下代码实现震动效果： ``` var jsc = new ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

廖小新

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值