前言

正如這個名字，這是一個具有拖拽吸附功能的浮窗菜單，開源項目

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

總結

以上是生活随笔為你收集整理的html5鼠标下拉浮窗固定,【前端技术】vue-floating-menu可拖拽吸附的浮窗菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。