前言
正如这个名字，这是一个具有拖拽吸附功能的浮窗菜单，开源项目
一个基于 vue 的浮窗组件,可在屏幕内自由拖拽，拖拽后可以根据最后的位置吸附到页面两边，而且可以点击浮窗显示菜单
效果如下:
遇到的问题总结
鼠标移动过快，导致拖拽失焦：
moveStart(e) {
// ... ...省略号... ...
// 具体可以在github项目里查看
document.onmousemove = async (e) => {
this.clickFlag = false;
this.moveFlags = true;
// 💥👉在这里边处理拖拽时的位置更新,就是因为这个。
// 我之前是单独通过监听mousemove的方法，所以遇到了这个问题
};
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
this.moveEnd();
};
},
判断是否是点击事件：
toggleMenu() {
// 如果上一次down事件到下一次click事件中 相同即为点击事件
if (this.lastMoveIndex == this.curMoveIndex) {
//💥点击事件
}
this.curMoveIndex = this.lastMoveIndex;
},
moveStart(e) {
// ... ...省略号... ...
// 具体可以在github项目里查看
document.onmousemove = async (e) => {
this.lastMoveIndex++;
};
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
this.moveEnd();
};
},
Usage
