H5实现类似微信可拖拽左右吸边浮动按钮
背景
之前项目需求产品经理要求实现一个可以实时拖拽的按钮
,刚好我们移动端H5用的调试工具vconsole也有类似功能,于是研究了一下vconsole里面具体实现的源码,参考其中代码自己也实现了一个, 点击查看demo效果
然后在做另外一个需求的时候产品经理无意中看到我手机微信的那个可以拖拽并且可以自动左右吸附的浮窗按钮,说这个效果不错,就按照微信的这个效果来,于是在原来的那个基础上有实现了一个类似微信可拖拽左右吸边浮动按钮
,点击查看demo效果
技术实现
其实实现这个功能所使用到的技术点并不难,主要是要处理边界情况和各种细节
实现实时拖拽功能技术点:
-
移动端: 监听 touchstart
、touchmove
、