源码解读 - FabButton悬浮拖拽按钮源码解读 · Issue #I4E1LQ · Gitee Community/OpenHarmony组件开发大赛-有奖征文

## 为什么要做这个
翻阅了文档,发现并没有拖拽组件,根据IOS的拖拽按钮产生了想法于是乎就自己想着实现一个
## 演示效果
![输入图片说明](https://gitee.com/queling/fab-button/raw/master/gif/showTime.gif "屏幕截图.png")![输入图片说明](https://gitee.com/queling/fab-button/raw/master/gif/square-round.gif "屏幕截图.png")
## 开发环境
1. openHarmary和HarmaryOS语法几乎保持一致
2. SDk6
3. 开发工具:DevEcoStudio2.2 beta2
### 功能
1.悬浮按钮拖拽，手指松开贴边
2.点击悬浮按钮显示工具栏
3.工具栏可以根据参数以window为基准左中右对齐，也可以悬浮按钮为基准点，上下对齐
## 思路解析
首先需要在手指触摸的时候,手指滑动的时候分别获取到其坐标点,根据他们的差值,计算出悬浮按钮拖拽的距离.
## 1.  在手指触摸时候
#### 1.1. 需要获取到元素距离屏幕左侧(offsetLeft)&上侧的距离(offsetTop);
![输入图片说明](https://images.gitee.com/uploads/images/2021/1015/150128_03aea897_2257811.png "屏幕截图.png")
1.2. 获取到手指触摸元素的坐标点（x,y）
## 2. 在手指滑动的时候
#### 2.1. 在滑动的时候，实时获取到滑动的坐标点（x,y）；
#### 2.2. 计算元素的left值和top值，公式如下：
* left = 滑动时的x值 - （触摸时的x值-元素的offsetLeft）

* top = 滑动时的y值 - （触摸时的y值-元素的offsetTop）

## 3. 最大最小边界值计算
#### 3. 最大边界值不能大于屏幕宽高；最小边界值不能小于0；
* 最left小边界值=left小于0；就让他等于0；
* 最小top边界值=top小于0；就让他等于0；
* 最大left边界值=屏幕宽度-元素自身宽度
* 最大top边界值=屏幕高度-元素自身高度
![输入图片说明](https://images.gitee.com/uploads/images/2021/1015/150757_84e4df6a_2257811.png "屏幕截图.png")
4. 贴边吸附效果
贴边计算公式：(屏幕宽度-元素宽度) /2;
4.1 如果滑动的left值大于屏幕宽度的一半，就贴边到右侧;
此时left=屏幕宽度-元素宽度
4.2 如果滑动的left值小于于屏幕宽度的一半，就贴边到左侧；此时left赋值零;
注意：此处的left指的是2.2下的left
![输入图片说明](https://images.gitee.com/uploads/images/2021/1015/152236_b55ac928_2257811.png "屏幕截图.png")
## 5. 贴边后长时间不操作，使其透明化
5.1 手指离两秒开后，使其透明化；当手指手指触摸时候，使其不透明化
* JS
![输入图片说明](https://images.gitee.com/uploads/images/2021/1015/152335_72b16060_2257811.png "屏幕截图.png")
* hml
![输入图片说明](https://images.gitee.com/uploads/images/2021/1015/152415_547a2742_2257811.png "屏幕截图.png")
* css 
![输入图片说明](https://images.gitee.com/uploads/images/2021/1015/152452_88fe24ac_2257811.png "屏幕截图.png")
## 6. 工具栏
** 以window视图为基线，偏左，偏右，居中显示的时候， 始终垂直居中，计算公式：
** top = （window窗口高度 – 工具栏高-工具栏上下边距）/  2
6.1 工具栏靠window左边显示（以window视图为基线）
偏左显示的时候，left直接设置为0即可
6.2 工具栏靠window右边显示（以window视图为基线）
偏右显示的时候，需要计算left的偏移量的值
left计算公式：window窗口宽度 -工具栏宽度 - 工具栏左右边距
6.3 工具栏以window中心显示（以window视图为基线）
居中显示的时候，此时工具栏水平垂直居中
计算公式：（window窗口宽度 -工具栏宽度 - 工具栏左右边距）/ 2

工具栏以window视图为基线显示,代码截图
![输入图片说明](https://images.gitee.com/uploads/images/2021/1015/153805_18d1c658_2257811.png "屏幕截图.png")

6.4 工具栏显示在上方（以fab悬浮按钮为基线）
获取悬浮按钮的距离顶部距离 和 工具栏高度，用来判断悬浮按钮顶部偏移距离是否小于工具栏高度；
获取悬浮按钮的距离顶部距离 小于 悬浮按钮高度，悬浮按钮top偏移量就向下方挪动
a悬浮按钮top偏移量计算公式：工具栏高度+20;
加了20 是让工具栏和悬浮按钮有距离
工具栏top偏移量计算公式：悬浮按钮顶部top – 工具栏高度
这个时候悬浮按钮顶部top值在 a 里面重新计算了
6.5 工具栏显示在下方（以fab悬浮按钮为基线）
获取悬浮按钮的距离底部距离 和 工具栏高度，用来判断悬浮按钮底部偏移距离是否小于工具栏高度；
判断条件：悬浮按钮距离底部偏移量  是否大于 window视图高度-工具栏高度
如果大于重新计算悬浮按钮偏移量 和 工具栏偏移量
悬浮按钮偏移量公式：window视图高度 – 工具栏高度 – 20
减了20 是让工具栏和悬浮按钮有距离
工具栏偏移量公式： window视图高度 – 工具栏高度

** 工具栏以fab悬浮按钮为基线显示代码截图
![输入图片说明](https://images.gitee.com/uploads/images/2021/1015/154032_a227ed9c_2257811.png "屏幕截图.png")
### 做这个过程中的痛点
1. 在hml中,标签元素绑定判断语句,无法使用表达式,最后无奈,只能在JS逻辑内将表达式结果返回做判断
2. 当设置了在标签元素的css属性display:flex, 使用{{show}}或者{{if}}的时候,发现并不会起到什么作用
3. JS获取标签元素的大小及其窗口位置的时候,发现在onInit中并不起作用,使用定时器延时有感觉会增加性能问题,于是在组件生命周期onLayoutReady中获取
## 源码地址:[https://gitee.com/queling/fab-button](https://gitee.com/queling/fab-button)
作者:田帅

Gitee Community/OpenHarmony组件开发大赛-有奖征文

内容风险标识

源码解读 - FabButton悬浮拖拽按钮源码解读

评论 (2)

Gitee Community/OpenHarmony组件开发大赛-有奖征文 .gitee-modal { width: 500px !important; }

内容风险标识

源码解读 - FabButton悬浮拖拽按钮源码解读

评论 (2)

搜索帮助

Gitee Community/OpenHarmony组件开发大赛-有奖征文