当前位置: 首页 > news >正文

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. 使用场景 很多网页在浏览器右侧有"导航"或者“智能助手”的悬浮小气泡框&#xff0c;比如我们的csdn☞ 作为页面友好型的引导标注&#xff0c;某些场景下这些小气泡可以…...

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-均值聚类算法是一种常用的无监督学习算法&#xff0c;用于将相似的数据点分组为聚类。 其步骤如下&#xff1a; 1. 初始化&#xff1a;选择聚类数K&#xff0c;随机选取K个聚类中心。 2. 计算距离&#xff1a;计算每个数据点与K个聚类中心的距离&#xff0c;将其分配到距离最…...

【数据化分析和建模】一般步骤(个人工作经验总结)

近期关于【数据化分析和建模】一般步骤的思考如下。 以终为始&#xff0c;要解决什么问题&#xff0c;实现什么效果&#xff1f; 数据可视化分析的首要目标是通过将数据以可视化图表的形式真实、完整地呈现业务现状&#xff0c;为发现业务问题打好基础&#xff0c;包括实时的…...

视频安防监控EasyCVR平台海康大华设备国标GB28181告警布防的报文说明

TSINGSEE青犀视频监控综合管理平台EasyCVR基于云边端协同&#xff0c;可支持海量视频的轻量化接入与汇聚管理。平台既具备传统安防视频监控的能力&#xff0c;比如&#xff1a;视频监控直播、云端录像、云存储、录像检索与回看、告警上报、平台级联、云台控制、语音对讲等&…...

T31开发笔记:librtmp拉流测试

若该文为原创文章&#xff0c;转载请注明原文出处。 T31使用librtmp拉流并保存成FLV文件或H264和AAC文件。 librtmp编译在前面有教程&#xff0c;自行编译。 实现的目的是想要获取获取rtmp的AAC流并播放&#xff0c;实时双向对讲功能。 一、硬件和开发环境 1、硬件&#xff1…...

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按钮&#xff0c;这里使用的是监听手势点击事件。 一、GestureDetector GestureDetector属性定义 GestureDetector({super.key,this.child,this.onTapDown,this.onTapUp,t…...

深度优先搜索|1034, 1020, 1254

深度优先搜索|1034. 边界着色&#xff0c; 机器人的运动范围&#xff0c;529. 扫雷游戏 边界着色机器人的运动范围扫雷问题 边界着色 把这个题分段了&#xff0c;先找到包括 (row, col) 的连通分量&#xff0c;然后再去找符合条件的边界&#xff0c;找到以后涂上颜色就行。 c…...

都市信息供求网servlet+jsp新闻广告出售java源代码mysql

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 都市信息供求网servletjsp 系统1权限&#xff1a;管理…...

kubeadm init:failed to pull image registry.k8s.io/pause:3.6

错误信息&#xff1a; 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…...

设计模式之简单工厂模式、工厂模式、抽象工厂模式

参考&#xff1a; 设计模式笔记 简单工厂模式 ● 将类的创建过程交给工厂类实现&#xff0c;如果需要一个类对象&#xff0c;则直接通过工厂创建一个类。 ● 简单工厂模式不符合开闭原则 ● 适用场景&#xff1a;工厂类负责创建的对象比较少&#xff1b;客户端只知道传入工厂…...

C# 控制台彩色深度打印 工具类

文章目录 前言Nuget 环境安装代码使用打印结果 总结 前言 有时候我们想要靠打印获得程序信息&#xff0c;因为Dubeg模式需要一点一点断点进入进出&#xff0c;但是我们觉得断点运行实在是太慢了&#xff0c;还是直接打印后找结果会好一点。 Nuget 环境安装 想自己写的话可以看…...

Pytorch Tensor维度变换方法

1.torch.reshape()、torch.view()可以调整Tensor的shape 2.torch.unsqueeze(index)可以为Tensor增加一个维度 3.squeeze()可以删减维度 4.expand&#xff08;&#xff09;扩展维度 5.repeat()维度重复&#xff0c;不常用 6.transpose(dim1, dim2)交换dim1与dim2&#xff0…...

微信小程序之点击文字文字自动转语音进行播放,微信小程序文字识别转语音播放

需求 一堆题目&#xff0c;题干需要在点击的时候进行语音朗读&#xff0c;不做音频上传&#xff0c;不然不便于维护 解决方案 点击查看微信官方文档&#xff1a;微信同声传译 使用流程 后台配置 mp.weixin.qq.com 设置 > 第三方设置 > 插件管理 小程序插件使用流…...

主动学习、半监督学习、它们之间的区别?

1、主动学习&#xff08;Active Learning&#xff09;&#xff1a; 含义&#xff1a; 有的时候&#xff0c;有类标的数据比较稀少而没有类标的数据是相当丰富的&#xff0c;但是对数据进行人工标注又非常昂贵&#xff0c;这时候&#xff0c;学习算法可以主动地提出一些标注请…...

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是一个稀疏卷积库&#xff0c;在点云相关的深度学习算法中用的比较多。由于目前官方升级到了2.0&#xff0c;然而有些算法&#xff08;比如审稿人要我复现的Cylinder3D&#xff09;仍需要用到1.2.1版本&#xff0c;因此本人花了亿点点时间折腾了一下。。。 本机安装cuda…...

java+springboot+mysql企业邮件管理系统

项目介绍&#xff1a; 使用javaspringbootmysql开发的企业邮件管理系统&#xff0c;系统包含超级管理员、管理员、员工角色&#xff0c;功能如下&#xff1a; 超级管理员&#xff1a;管理员管理&#xff1b;员工管理&#xff1b;反馈管理&#xff1b;系统公告&#xff1b;个人…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...