html5鼠标下拉浮窗固定,【前端技术】vue-floating-menu可拖拽吸附的浮窗菜单

前言

正如这个名字，这是一个具有拖拽吸附功能的浮窗菜单，开源项目

一个基于 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