网站咋开通,西安高端品牌网站,wordpress不能注册,react.js做的网站目录
0. 使用场景
1. 动图示例 2. 实现方式
2.1 创建drag.js
2.2 使用v-drag
3. 结尾 0. 使用场景
很多网页在浏览器右侧有导航或者“智能助手”的悬浮小气泡框#xff0c;比如我们的csdn☞
作为页面友好型的引导标注#xff0c;某些场景下这些小气泡可以…目录
0. 使用场景
1. 动图示例 2. 实现方式
2.1 创建drag.js
2.2 使用v-drag
3. 结尾 0. 使用场景
很多网页在浏览器右侧有导航或者“智能助手”的悬浮小气泡框比如我们的csdn☞
作为页面友好型的引导标注某些场景下这些小气泡可以沿着浏览器的右侧进行上下的拖拽。
1. 动图示例
简单贴一张动图演示下效果 2. 实现方式
用vue的自定义指令做一个v-drag的操作指令也有许多大佬分享了源码只不过在此基础上稍加修改下限定一直保持沿着浏览器右侧上线拖拽而已。
2.1 创建drag.js
// 实现拖动的js
import Vue from vue;
// 自定义拖拽指令第一个参数drag,即是拖拽指令名称
Vue.directive(drag, {bind: function (el) {const odiv el;// 缓存 clientX clientY 的对象: 用于判断是点击事件还是移动事件const clientOffset {};odiv.style.position fixed;odiv.onmousedown (e) {const disX e.clientX - odiv.offsetLeft;const disY e.clientY - odiv.offsetTop;// 缓存 clientX clientYclientOffset.clientX e.clientX;clientOffset.clientY e.clientY;document.onmousemove (e) {const left e.clientX - disX;const top e.clientY - disY;// odiv.style.left left px; // 放开该部分可以进行全屏的拖拽odiv.style.right 0px; // 限制只能沿着右侧进行拖拽odiv.style.top top px;// odiv 距离顶部的距离const dragDivTop window.innerHeight - odiv.getBoundingClientRect().height;// odiv 距离左部的距离const dragDivLeft window.innerWidth - odiv.getBoundingClientRect().width;// 边界判断处理// 2、超出顶部处理if (odiv.getBoundingClientRect().top 0) {odiv.style.top 0px;}// 3、超出底部处理if (odiv.getBoundingClientRect().top dragDivTop) {odiv.style.top dragDivTop px;}// 4、超出右边边界区域处理if (odiv.getBoundingClientRect().left dragDivLeft) {// odiv.style.left dragDivLeft px; // 放开该部分可以进行全屏的拖拽odiv.style.right 0px; // 限制只能沿着右侧进行拖拽}// 5、超出左边边界区域处理if (odiv.getBoundingClientRect().left 0) {// odiv.style.left 0px; // 放开该部分可以进行全屏的拖拽odiv.style.right 0px; // 限制只能沿着右侧进行拖拽}};document.onmouseup () {document.onmousemove null;document.onmouseup null;};};// 绑定鼠标松开事件odiv.addEventListener(mouseup, (event) {const clientX event.clientX;const clientY event.clientY;if (clientX clientOffset.clientX clientY clientOffset.clientY) {return false;// console.log(click 事件);} else {return false;// console.log(drag 事件);}});}
});其中这部分 odiv.style.right 0px; // 限制只能沿着右侧进行拖拽 是限制拖拽位置的共有三处注释掉放开上一行的代码即可实现全屏的拖拽。
2.2 使用v-drag 使用非常简单如上图所示加一个v-drag指令即可
3. 结尾
源码参考☞vue自定义组件实现右下角悬浮工具栏。vue实现可以拖动的右下角悬浮菜单。点击悬浮菜单弹出一个自定义的弹窗组件组件传参。vue模板 - 剑轩的专栏 - TNBLOG感谢
