vue 浏览器右侧可拖拽小组件
目录
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感谢🙏
相关文章:
vue 浏览器右侧可拖拽小组件
目录 0. 使用场景 1. 动图示例 2. 实现方式 2.1 创建drag.js 2.2 使用v-drag 3. 结尾 0. 使用场景 很多网页在浏览器右侧有"导航"或者“智能助手”的悬浮小气泡框,比如我们的csdn☞ 作为页面友好型的引导标注,某些场景下这些小气泡可以…...
SpringMvc学习笔记五
Restful 风格路由 1. 配置类 1.1、SpringMvcConfig配置类 Configuration ComponentScan({"com.itheima.controller", "com.itheima.config"}) 方式1.2 添加com.itheima.config 扫描目录 EnableWebMvc public class SpringMvcConfig { } 1.2、ServletCo…...
ORACLE-DG总结
述 当主库的某些日志没有成功传送到备库,那么这时候就发生了归档裂缝(Archive Gap)。目前Oracle提供了两种日志GAP的检测和处理机制,分别是自动GAP处理(Automatic Gap Resolution)和FAL进程GAP处理(FAL Gap Resolution)。自动GAP处理即主库上的ARCn进程会每分钟检查备库…...
机器学习中的 K-均值聚类算法及其优缺点
K-均值聚类算法是一种常用的无监督学习算法,用于将相似的数据点分组为聚类。 其步骤如下: 1. 初始化:选择聚类数K,随机选取K个聚类中心。 2. 计算距离:计算每个数据点与K个聚类中心的距离,将其分配到距离最…...
【数据化分析和建模】一般步骤(个人工作经验总结)
近期关于【数据化分析和建模】一般步骤的思考如下。 以终为始,要解决什么问题,实现什么效果? 数据可视化分析的首要目标是通过将数据以可视化图表的形式真实、完整地呈现业务现状,为发现业务问题打好基础,包括实时的…...
视频安防监控EasyCVR平台海康大华设备国标GB28181告警布防的报文说明
TSINGSEE青犀视频监控综合管理平台EasyCVR基于云边端协同,可支持海量视频的轻量化接入与汇聚管理。平台既具备传统安防视频监控的能力,比如:视频监控直播、云端录像、云存储、录像检索与回看、告警上报、平台级联、云台控制、语音对讲等&…...
T31开发笔记:librtmp拉流测试
若该文为原创文章,转载请注明原文出处。 T31使用librtmp拉流并保存成FLV文件或H264和AAC文件。 librtmp编译在前面有教程,自行编译。 实现的目的是想要获取获取rtmp的AAC流并播放,实时双向对讲功能。 一、硬件和开发环境 1、硬件࿱…...
2308C++概念化
原文 库 //概念化(需要C20) struct 可画 {void 画(小出流 &out) const {te::call([](auto const &s, auto &out)-> decltype(s.画(out)) { s.画(out); }, *this, out);} }; struct 方形 {void 画(小出流 &out) const { out << "方形"; } }…...
flutter开发实战-实现自定义按钮类似UIButton效果
flutter开发实战-实现自定义按钮类似UIButton效果 最近开发过程中需要实现一下UIButton效果的flutter按钮,这里使用的是监听手势点击事件。 一、GestureDetector GestureDetector属性定义 GestureDetector({super.key,this.child,this.onTapDown,this.onTapUp,t…...
深度优先搜索|1034, 1020, 1254
深度优先搜索|1034. 边界着色, 机器人的运动范围,529. 扫雷游戏 边界着色机器人的运动范围扫雷问题 边界着色 把这个题分段了,先找到包括 (row, col) 的连通分量,然后再去找符合条件的边界,找到以后涂上颜色就行。 c…...
都市信息供求网servlet+jsp新闻广告出售java源代码mysql
本项目为前几天收费帮学妹做的一个项目,Java EE JSP项目,在工作环境中基本使用不到,但是很多学校把这个当作编程入门的项目来做,故分享出本项目供初学者参考。 一、项目描述 都市信息供求网servletjsp 系统1权限:管理…...
kubeadm init:failed to pull image registry.k8s.io/pause:3.6
错误信息: Unfortunately, an error has occurred: timed out waiting for the condition This error is likely caused by: - The kubelet is not running - The kubelet is unhealthy due to a misconfiguration of the node in some way…...
设计模式之简单工厂模式、工厂模式、抽象工厂模式
参考: 设计模式笔记 简单工厂模式 ● 将类的创建过程交给工厂类实现,如果需要一个类对象,则直接通过工厂创建一个类。 ● 简单工厂模式不符合开闭原则 ● 适用场景:工厂类负责创建的对象比较少;客户端只知道传入工厂…...
C# 控制台彩色深度打印 工具类
文章目录 前言Nuget 环境安装代码使用打印结果 总结 前言 有时候我们想要靠打印获得程序信息,因为Dubeg模式需要一点一点断点进入进出,但是我们觉得断点运行实在是太慢了,还是直接打印后找结果会好一点。 Nuget 环境安装 想自己写的话可以看…...
Pytorch Tensor维度变换方法
1.torch.reshape()、torch.view()可以调整Tensor的shape 2.torch.unsqueeze(index)可以为Tensor增加一个维度 3.squeeze()可以删减维度 4.expand()扩展维度 5.repeat()维度重复,不常用 6.transpose(dim1, dim2)交换dim1与dim2࿰…...
微信小程序之点击文字文字自动转语音进行播放,微信小程序文字识别转语音播放
需求 一堆题目,题干需要在点击的时候进行语音朗读,不做音频上传,不然不便于维护 解决方案 点击查看微信官方文档:微信同声传译 使用流程 后台配置 mp.weixin.qq.com 设置 > 第三方设置 > 插件管理 小程序插件使用流…...
主动学习、半监督学习、它们之间的区别?
1、主动学习(Active Learning): 含义: 有的时候,有类标的数据比较稀少而没有类标的数据是相当丰富的,但是对数据进行人工标注又非常昂贵,这时候,学习算法可以主动地提出一些标注请…...
linux快速安装Rabbitmq
linux快速安装Rabbitmq 准备yum仓库 # root执行rpm --import https://github.com/rabbitmq/signing-keys/releases/download/2.0/rabbitmq-release-signing-key.ascrpm --import https://packagecloud.io/rabbitmq/erlang/gpgkeyrpm --import https://packagecloud.io/ra…...
spconv1.2.1库的编译与安装
SpConv是一个稀疏卷积库,在点云相关的深度学习算法中用的比较多。由于目前官方升级到了2.0,然而有些算法(比如审稿人要我复现的Cylinder3D)仍需要用到1.2.1版本,因此本人花了亿点点时间折腾了一下。。。 本机安装cuda…...
java+springboot+mysql企业邮件管理系统
项目介绍: 使用javaspringbootmysql开发的企业邮件管理系统,系统包含超级管理员、管理员、员工角色,功能如下: 超级管理员:管理员管理;员工管理;反馈管理;系统公告;个人…...
运动控制系统(五)-闭环的PI控制系统
上一节我们讲到控制系统的三大规律,第一条就是“比例控制系统无法消除“静差”。这一节我们解决这个问题。闭环积分控制在介绍静差的时候我们提到了:静差的存在主要是因为比例控制器仅依赖于当前误差ΔUn来进行调节,而没有考虑过去࿰…...
机器人跟随算法
REF:基于多机器人路径规划与编队控制的优化研究1. 基础模型RRT(快速随机树)算法:模拟树的生长过程,起始点为树的根节点,在环境中随机采样作为树的叶节点,从最近节点到目标点的方向上,…...
deepin系统更换镜像源
deepin更换镜像源的操作 392 cd /etc/393 ls394 ls395 cd apt/396 ls397 cp sources.list sources.list_backup398 vim sources.list399 apt-get clean400 apt-get update401 apt-get upgrade402 history 20 rootZZM-PC:/etc/apt# 对应上面的vim操作 rootZZM-PC:/et…...
计算机工程与应用投稿求助
计算机工程与应用二审后主编给了请专家复审意见,请问下朋友们这样复审的话还是二审的专家吗?这样的话中的希望还大吗?谢谢朋友们...
YOLOv12与MATLAB联合仿真:算法原型快速验证与性能分析
YOLOv12与MATLAB联合仿真:算法原型快速验证与性能分析 对于习惯在MATLAB环境中工作的算法工程师和研究人员来说,一个常见的痛点在于:当需要验证前沿的深度学习目标检测算法(如最新的YOLOv12)时,往往不得不…...
Ubuntu 22.04 网络配置疑难:为何 netplan apply 后 IP 仍“顽固”不变?
1. 当netplan apply失效时,我们到底遇到了什么? 最近在帮朋友调试一台Ubuntu 22.04服务器时,遇到了一个特别"顽固"的问题:明明用netplan修改了IP地址,执行netplan apply也没报错,但重启后IP地址就…...
Office Custom UI Editor终极指南:免费打造专属Office界面
Office Custom UI Editor终极指南:免费打造专属Office界面 【免费下载链接】office-custom-ui-editor Standalone tool to edit custom UI part of Office open document file format 项目地址: https://gitcode.com/gh_mirrors/of/office-custom-ui-editor …...
GetQzonehistory终极指南:5分钟永久备份你的QQ空间记忆
GetQzonehistory终极指南:5分钟永久备份你的QQ空间记忆 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 在这个数字记忆易逝的时代,QQ空间承载了我们太多的青春回…...
SmolVLA入门指南:理解config.json中动作维度、图像尺寸等关键参数
SmolVLA入门指南:理解config.json中动作维度、图像尺寸等关键参数 1. 什么是SmolVLA? SmolVLA是一个专门为经济实惠的机器人技术设计的紧凑高效视觉-语言-动作模型。这个模型最大的特点就是在保持高性能的同时,大幅降低了计算资源需求&…...
从零到一:在Vitis平台上构建ZYNQ PS-SPI Flash驱动
1. 环境准备与硬件连接 在开始构建ZYNQ PS-SPI Flash驱动之前,我们需要准备好开发环境和硬件平台。我推荐使用Xilinx官方提供的Vitis 2022.1版本,这个版本对ZYNQ系列的支持比较稳定。硬件方面,你需要一块带有SPI Flash的ZYNQ开发板࿰…...
