H5实现类似微信可拖拽左右吸边浮动按钮
H5实现类似微信可拖拽左右吸边浮动按钮
背景
之前项目需求产品经理要求实现一个可以实时拖拽的按钮
,刚好我们移动端H5用的调试工具vconsole也有类似功能,于是研究了一下vconsole里面具体实现的源码,参考其中代码自己也实现了一个, 点击查看demo效果
然后在做另外一个需求的时候产品经理无意中看到我手机微信的那个可以拖拽并且可以自动左右吸附的浮窗按钮,说这个效果不错,就按照微信的这个效果来,于是在原来的那个基础上有实现了一个类似微信可拖拽左右吸边浮动按钮
,点击查看demo效果
技术实现
其实实现这个功能所使用到的技术点并不难,主要是要处理边界情况和各种细节
实现实时拖拽功能技术点:
移动端: 监听 touchstart
、touchmove
、touchend
事件
PC端: 监听 mousedown
、mousemove
、mouseup
事件
以及一些dom操作的api,获取节点的位置等
实现源码
废话不多说,直接上源码,这里只放js代码,要看html/css/js,直接可以在demo页面,按F12
查看完整内容
const app = new Vue({ el: "#app", data: { isMove: false, // 是否在移动 isLeft: false, // 吸附左边 mineBtnPos: { x: 0, // right y: 0, // bottom 该值必须是初始定位样式值的倍数(比如使用750px设计稿的需要设置初始值为设计稿的一半),否则首次拖拽可能会错位 startX: 0, startY: 0, endX: 0, endY: 0, }, }, created() { this.mineBtnPos = Object.assign(this.mineBtnPos, this.btnInitStyle); }, mounted() { this._bindEvent(); }, methods: { clickMineBtn() { location.href = "https://liaolongdong.com/"; }, /** * bind DOM events * @private */ _bindEvent() { let that = this; let dWidth = document.documentElement.clientWidth || document.body.clientWidth;
let $mineBtn = document.querySelector(".c-draggable-likewxfloat"); let mWidth = $mineBtn.getBoundingClientRect().width; let bottomPx = parseFloat(window.getComputedStyle($mineBtn, null).bottom) || 0; that.mineBtnPos.y = bottomPx; $mineBtn.addEventListener("touchstart", function (e) { that.mineBtnPos.startX = e.touches[0].pageX; that.mineBtnPos.startY = e.touches[0].pageY; }); $mineBtn.addEventListener("touchend", function (e) { that.mineBtnPos.x = that.mineBtnPos.endX; that.mineBtnPos.y = that.mineBtnPos.endY;
// 增加左右吸附效果 // that.mineBtnPos.x的值是从右边开始计算的 that.isMove = false; if (that.mineBtnPos.x < dWidth / 2) { that.mineBtnPos.x = 0; that.isLeft = false; } else { that.isLeft = true; that.mineBtnPos.x = dWidth - mWidth; } $mineBtn.style.right = that.mineBtnPos.x + "px";
that.mineBtnPos.startX = 0; that.mineBtnPos.startY = 0; }); $mineBtn.addEventListener("touchmove", function (e) { that.isMove = true;
if (e.touches.length > 0) { let offsetX = e.touches[0].pageX - that.mineBtnPos.startX, offsetY = e.touches[0].pageY - that.mineBtnPos.startY; let x = that.mineBtnPos.x - offsetX, y = that.mineBtnPos.y - offsetY;
// check edge if (x + $mineBtn.offsetWidth > document.documentElement.offsetWidth) { x = document.documentElement.offsetWidth - $mineBtn.offsetWidth; } if ( y + $mineBtn.offsetHeight > document.documentElement.offsetHeight ) { y = document.documentElement.offsetHeight - $mineBtn.offsetHeight; } if (x < 0) { x = 0; } if (y < 0) { y = 0; } $mineBtn.style.right = x + "px"; $mineBtn.style.bottom = y + "px"; that.mineBtnPos.endX = x; that.mineBtnPos.endY = y; e.preventDefault(); } }); }, },});
demo效果地址
H5实现类似微信可拖拽左右吸边浮动按钮
H5实现类似于vconsole的实时拖拽功能
本文由 mdnice 多平台发布
H5实现类似微信可拖拽左右吸边浮动按钮相关推荐
- ios 添加浮动效果_iOS实现拖拽View跟随手指浮动效果
效果图: 1.自定义要跟随手指浮动的那个View // // OrangeView.m // 拖拽View跟随手指浮动 // // Created by llkj on 2017/8/16. // C ...
- 安卓开发仿微信图片拖拽_使用Android 模仿微信朋友圈图片拖拽返回
1概述 目前的app的动画效果是越来越炫了,很多主流app的图片预览返回都有类似功能,比较常见的是ios自带相册,微信朋友圈等等.自己项目中也有类似功能,最近整理了一下这个功能的代码,做个笔记记录,有 ...
- 安卓开发仿微信图片拖拽_Android 仿微信朋友圈图片拖拽返回
目前的app的动画效果是越来越炫了,很多主流app的图片预览返回都有类似功能,比较常见的是ios自带相册,微信朋友圈等等.自己项目中也有类似功能,最近整理了一下这个功能的代码,做个笔记记录,有兴趣的朋 ...
- 安卓开发仿微信图片拖拽_Android 仿微信朋友圈发表图片拖拽和删除功能
朋友圈实现原理 我们使用 Android Device Monitor 来分析朋友圈发布图片的界面实现原理.如果需要分析其他应用的界面实现也是采用这种方法哦. 打开 Android Device Mo ...
- 类似360浏览器 拖拽插件_又一个好用的能上谷歌学术的插件,收藏吧。!
前段时间,给大家安利了一个能上谷歌学术的插件: 大飞鸽软件助手:一个插件,让你轻松浏览谷歌学术,助力科研!zhuanlan.zhihu.com 废话不多说,今天再次安利一个能够上谷歌学术的插件. 这 ...
- 安卓开发仿微信图片拖拽_仿微信朋友圈发表图片拖拽和删除功能
原标题:仿微信朋友圈发表图片拖拽和删除功能 中国联通在香港公布了上市公司2017年中期业绩.2017年上半年,公司主要业绩指标持续向好,收入稳步回升,服务收入达到人民币1,241.1亿元,同比增长3. ...
- h5物体拖动_html5实现拖拽效果
在此之前,实现拖拽操作都是开发人员自定义逻辑实现的,但是HTML5提供了拖拽API ,使得拖拽操作的实现变得简单. fish.gif 拖拽 #div1 { width: 100px; height: ...
- 拖拽松开飞走触发按钮(飞屏按钮)
using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using U ...
- 安卓开发仿微信图片拖拽_Android仿微信朋友圈图片浏览器(支持图片手势缩放,拖动)...
[实例简介] Android仿微信朋友圈图片浏览器(支持图片手势缩放,拖动) [实例截图] [核心代码] ImageDemo-2014-02-18 └── ImageDemo-2014-02-18 ├ ...
最新文章
- 嵌入式系统降低功耗的设计技术
- 周志华等人提出可微XGBoost算法sGBM,速度提升、准确率更胜一筹
- python3 中 布尔 bool 类型转换
- mysql 常用优化方案_项目中常用的 19 条 MySQL 优化方案
- JavaScript prototype
- 系统启动与内核管理 ;AWK部分 重要内容 (实验及awk的常见面试题)
- 面试官:Redis的事务满足原子性吗?
- 快速找到message toast弹出的application代码位置
- 东电计算机考研大概分数,2019年各学院硕士研究生拟录取名单公示
- rust投递箱连接箱子_一种用于防盗的牛奶投递箱的制作方法
- 为ASP.NET封装的SQL数据库访问类(转)
- 游戏策划笔记:工作感受感官引导
- IntelliJ IDEA 常用设置 主题颜色模式、字体、样式、背景自定义颜色及其背景图片(图文步骤)
- 主流编程语言的特点分析
- 在抖音找罗永浩干掉辣条
- 【解读大佑 】〔文/马世芳 吴清圣〕
- OPA 论坛为流程控制设备接口扩展了开放性、互操作性标准 - 第一部分
- SAP PP模块常用事务代码
- 终于有大lao把“计算机底层原理“全部总结出来了
- 解析Android mdpi hdpi xhdpi xxhdpi xxxhdpi 之间关系
热门文章
- pandas读取excel-xlrd相关
- 计算机术语中lisp,Lisp语言之父、人工智能之父John McCarthy
- 幅值测量c语言程序,幅值和电平测量程序块
- 趣谈设计模式 | 状态模式(State):如何实现游戏中的状态切换?
- 使用 Flutter 创建自适应应用
- 深入理解OpenStack Neutron之---3 Neutron的资源模型---读书笔记
- Program received signal SIGSEGV, Segmentation fault
- 外夹式超声波艾默生流量计安装步骤
- RdhA蛋白序列发育树构建及iTol美化
- 个人小程序申请制作流程