Vue拖拽悬浮按钮

Posted 2023-03-26

参考技术A 背景： 最近做的页面原本有一个点赞悬浮按钮，但是在不同分辨率的移动设备屏幕上，后边的文字显示位置不固定，有的会被悬浮按钮挡住。所以加了一个拖拽功能。

参考解决办法：   狗尾草-Vue拖拽组件

遇到问题及解决：

1.unable to preventDefault inside passive event listener due to taeget being treated as passive

原因是为了滚动顺滑，touchmove等事件会被浏览器默认设置为passive：true，需要手动设置成false。参考： Unable to preventDefault inside passive event listener 。文中提到的两种办法，第一种可以，第二种css办法试了无效（可能是设置的位置不对？）

2.拖拽之后，被拖拽的组件大小会改变

我是只需要y轴拖拽，拖拽后空间的高度改变了，拖过的路径都变成了div的高度，再点击之前组件挡住的地方，会出现点击到组件的效果。解决办法是设置组件height属性。

3.设置tansition后拖拽“不动”

网上看的一个例子里边加了transition，可能是想让效果平滑一些，但是却有一种拖不动的感觉。当时以为是拖拽功能实现的有问题，于是删了换了上边链接里的方法，拖拽get√。然后试着加了一下transition，又出现了阻塞。所以这里应该是不适合用transition属性的，而且不用也挺平滑的。

学习总结：

拖拽功能的实现，主要是通过监听鼠标事件，计算各种数值，不断调整组件的位置。因此，需要复习的知识点是鼠标事件，各种尺寸数据及之间的关系。存在的不足是，虽然发现了问题并解决了，但还是不知道问题原理层面的原因。知其然，不知其所以然，希望之后能把这块补充起来。