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

vue3鼠标拖拽滑动效果

第一步

在utils下面新建一个directives.js文件,然后引入如下代码

const dragscroll = (el) => {el.onmousedown = ev => {const disX = ev.clientX;const disY = ev.clientY; // 需要上下移动可以加const originalScrollLeft = el.scrollLeft;const originalScrollTop = el.scrollTop; // 需要上下移动可以加const originalScrollBehavior = el.style['scroll-behavior'];const originalPointerEvents = el.style['pointer-events'];el.style['scroll-behavior'] = 'auto';// 鼠标移动事件是监听的整个document,这样可以使鼠标能够在元素外部移动的时候也能实现拖动document.onmousemove = dv => {dv.preventDefault();const distanceX = dv.clientX - disX;const distanceY = dv.clientY - disY; // 需要上下移动可以加el.scrollTo(originalScrollLeft - distanceX, originalScrollTop - distanceY);   // 需要上下移动和左右移动// el.scrollTo(originalScrollLeft - distanceX, 0); // 不需要上下拖拽,y轴值为0};document.onmouseup = () => {document.onmousemove = null;document.onmouseup = null;el.style['scroll-behavior'] = originalScrollBehavior;el.style['pointer-events'] = originalPointerEvents;};};
};
export default dragscroll;

第二步

在main.js中引入

import dragscroll from '@/utils/directives.js'
app.directive('dragscroll',dragscroll)

 第三步

页面直接使用即可

<div id="imgBox" v-dragscroll><img src="@/assets/images/image.svg" alt="" />
</div>

相关文章:

vue3鼠标拖拽滑动效果

第一步 在utils下面新建一个directives.js文件&#xff0c;然后引入如下代码 const dragscroll (el) > {el.onmousedown ev > {const disX ev.clientX;const disY ev.clientY; // 需要上下移动可以加const originalScrollLeft el.scrollLeft;const originalScroll…...

08 通过从 库1 复制 *.ibd 到 库2 导致 mysql 启动报错

前言 呵呵 最近同事有这样的一个需求 需要将 库1 的一张表 复制到 库2 然后 我想到了 之前一直使用的通过复制这个库的 data 文件来进行数据迁移的思路, 是需要复制这个 库对应的 data 目录下的数据文件, 以及 ibdata1 文件 然后 我又在想 这里的场景能否也使用这里的额方式…...

一生一芯9——ubuntu22.04安装valgrind

这里安装的valgrind版本是3.19.0 下载安装包 在选定的目录下打开终端&#xff0c;输入以下指令 wget https://sourceware.org/pub/valgrind/valgrind-3.19.0.tar.bz2直至下载完成 解压安装包 输入下面指令解压安装包 tar -xvf valgrind-3.19.0.tar.bz2.tar.bz2注&#xf…...

STM32中BOOT的作用 (芯片死锁解决方法)

BOOT stm32中具有BOOT1和BOOT0 作用 BOOT是stm32单片机的启动模式&#xff0c; 通过不同组合模式&#xff0c;共有三种启动方式。 一般来说就是指我们下好程序后&#xff0c;重启芯片时&#xff0c;SYSCLK的第4个上升沿&#xff0c;BOOT引脚的值将被锁存。用户可以通过设置B…...

基于YOLOv8模型和DarkFace数据集的黑夜人脸检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要&#xff1a;基于YOLOv8模型和DarkFace数据集的黑夜人脸检测系统可用于日常生活中检测与定位黑夜下的人脸&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目…...

C++中<iostream> 的cin >> str 和<string>的getline(cin, str) 用来读取用户输入的两种不同方式的不同点

C中<iostream> 的cin >> str 和<string>的getline(cin, str) 用来读取用户输入的两种不同方式的不同点 &#xff1c;string&#xff1e;的getline()函数语法如下【https://cplusplus.com/reference/string/string/getline/】&#xff1a; istream& getl…...

微信报修系统有什么优势?怎么提升企业维修工作效率与管理水平?

随着智能化时代的到来&#xff0c;企业、事业单位的现代化设备数量和种类不断增加&#xff0c;原本繁琐的报修、填写记录、检修管理等工作得以简化。从发起报修到维修&#xff0c;以及维修之后给予评价的整个过程&#xff0c;通过手机微信报修系统均能看到&#xff0c;既省时又…...

11.2.1-通货膨胀CPI

文章目录 1. 什么是CPI2. 在哪里获取CPI数据3. CPI的同比、环比到底是什么意思&#xff1f;4. 计算购买力侵蚀5. 复利计算 微不足道的小事也会引发惊人的结果&#xff0c; 每念及此&#xff0c; 我就认为世上无小事。——布鲁斯巴登&#xff08;Bruce Barton&#xff09; 核心内…...

服务器基础

0x01基础 介绍 可以理解为企业级的电脑&#xff0c;比个人使用的电脑具备更强的配置、性能、可靠性及稳定性。设计工艺和器件全部采用企业级设计&#xff0c;保障7*24小时稳定运行。 演进历史 处理性能 外观 发展方向 分类 按外形分类 按高度分类 按应用分类 按综合能力…...

mybatis中#{ }和${ }的区别

先说结论&#xff1a;二者肯定是有区别的 区别总结 ${ } 直接的 字符串 替换&#xff0c;在mybatis的动态 SQL 解析阶段将会进行变量替换。 #{ } 通过预编译&#xff0c;用占位符的方式?传值可以把一些特殊的字符进行转义&#xff0c;这样可以防止一些sql注入。 举例说明区…...

【真人语音】讯飞星火个人声音训练及导出下载工具V0.2.exe

【项目背景】 小编一直在尝试着短视频技术&#xff0c;在读文案的时候经常会读错&#xff1b;所以&#xff0c;只能用微软或者剪映的文本转语音软件。 很早之前在Github上也看到过真人人声训练的开源代码&#xff0c;尝试过一番之后&#xff0c;也是以失败告终&#xff1b;就…...

正中优配:创业板指大涨3.47%!减速器等概念板块掀涨停潮!

周二&#xff08;8月29日)&#xff0c;三大股指团体涨超1%。截至上午收盘&#xff0c;上证指数涨1.39%&#xff0c;报3141.82点&#xff1b;深证成指和创业板指别离涨2.41%和3.47%&#xff1b;沪深两市算计成交额6264.51亿元&#xff0c;总体来看&#xff0c;两市个股涨多跌少&…...

多功能租车平台微信小程序源码 汽车租赁平台源码 摩托车租车平台源码 汽车租赁小程序源码

多功能租车平台微信小程序源码是一款用于汽车租赁的平台程序源码。它提供了丰富的功能&#xff0c;可以用于租赁各种类型的车辆&#xff0c;包括汽车和摩托车。 这个小程序源码可以帮助用户方便地租赁车辆。用户可以通过小程序浏览车辆列表&#xff0c;查看车辆的详细信息&…...

spring事件和线程池区别

Spring事件&#xff08;Spring Event&#xff09;和线程池&#xff08;Thread Pool&#xff09;是两个不同的概念。 Spring事件是Spring框架中的一种机制&#xff0c;用于在应用程序中实现发布-订阅模式。通过定义事件和监听器&#xff0c;可以在特定事件发生时&#xff0c;通…...

深圳寄墨西哥专线国际物流详解

随着全球贸易的不断发展&#xff0c;国际物流服务的需求也越来越大。深圳这座中国的特区城市&#xff0c;不仅是全球电子产品供应链的重要节点&#xff0c;也是国际物流服务的中心之一。对于那些需要将物品从深圳邮寄到墨西哥的人来说&#xff0c;深圳邮寄到墨西哥专线的国际物…...

PHP教学资源管理系统Dreamweaver开发mysql数据库web结构php编程计算机网页

一、源码特点 PHP 教学资源管理系统是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 源码 https://download.csdn.net/download/qq_41221322/88260480 论文 https://downl…...

机器学习---决策树算法(CLS、ID3、CART)

1. 决策树 决策树&#xff08;Decision Tree&#xff09;又称为判定树&#xff0c;是运用于分类的一种树结构。其中的每个内部结点 &#xff08;internal node&#xff09;代表对某个属性的一次测试&#xff0c;每条边代表一个测试结果&#xff0c;叶结点&#xff08;leaf&am…...

【算法与数据结构】404、LeetCode左叶子之和

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;思路比较简单&#xff0c;遍历所有节点然后判断该节点是否为左叶子节点&#xff0c;如果是&#xff0c…...

Apifox下载安装步骤

我们先访问网址 https://apifox.com/?utm_sourcebaidu&utm_mediumsem&utm_campaign251430236&utm_content7810722111&utm_termapifox%E6%9F%A5%E7%9C%8B%E7%89%88%E6%9C%AC&bd_vid8323327349775096324 然后 这里这个免费下载已经写的这么明显了 那就直接点…...

大华摄像头有问题,海康摄像头也有问题

买了个大华摄像头&#xff0c;除了抗噪方面效果不好&#xff0c;我是很满意的。前一段时间摄像头启动出了点问题&#xff08;忘记拔掉SD卡&#xff09;&#xff0c;于是买了个海康的。 大华摄像头是3寸&#xff0c;海康是2寸。视频效果差多了。看来大有大的道理。更可恨的是&a…...

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...

系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文通过代码驱动的方式&#xff0c;系统讲解PyTorch核心概念和实战技巧&#xff0c;涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...

若依登录用户名和密码加密

/*** 获取公钥&#xff1a;前端用来密码加密* return*/GetMapping("/getPublicKey")public RSAUtil.RSAKeyPair getPublicKey() {return RSAUtil.rsaKeyPair();}新建RSAUti.Java package com.ruoyi.common.utils;import org.apache.commons.codec.binary.Base64; im…...

基于单片机的宠物屋智能系统设计与实现(论文+源码)

本设计基于单片机的宠物屋智能系统核心是实现对宠物生活环境及状态的智能管理。系统以单片机为中枢&#xff0c;连接红外测温传感器&#xff0c;可实时精准捕捉宠物体温变化&#xff0c;以便及时发现健康异常&#xff1b;水位检测传感器时刻监测饮用水余量&#xff0c;防止宠物…...

GAN模式奔溃的探讨论文综述(一)

简介 简介:今天带来一篇关于GAN的,对于模式奔溃的一个探讨的一个问题,帮助大家更好的解决训练中遇到的一个难题。 论文题目:An in-depth review and analysis of mode collapse in GAN 期刊:Machine Learning 链接:...

【PX4飞控】mavros gps相关话题分析,经纬度海拔获取方法,卫星数锁定状态获取方法

使用 ROS1-Noetic 和 mavros v1.20.1&#xff0c; 携带经纬度海拔的话题主要有三个&#xff1a; /mavros/global_position/raw/fix/mavros/gpsstatus/gps1/raw/mavros/global_position/global 查看 mavros 源码&#xff0c;来分析他们的发布过程。发现前两个话题都对应了同一…...