当前位置: 首页 > 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;个人…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...