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
總結
以上是生活随笔為你收集整理的html5鼠标下拉浮窗固定,【前端技术】vue-floating-menu可拖拽吸附的浮窗菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c++计算eigen随笔(3)-求逆
- 下一篇： 计算机网络与维护考试题,《网络管理与维护