vue3 拖拽插件(drag)
前端vue项目中,经常会有弹框拖拽的需求,下面介绍常用方法:
1.如果你使用的是elementPlus插件的el-dialog组件,只需要增加draggable属性即可,代码如下:
<el-dialogv-model="showDiloag"width="500"draggable></e--dialog>
2.如果不使用ele 的组件,自己写弹框,那么可以自定义指令,代码如下(vue3):
drag.js文件:
const drag = {mounted(el, binding) {el.style.position = "absolute";const data = binding.value || { x: 0, y: 0, zIndex: 99999 };let { x, y, zIndex = 99999 } = data;el.style.left = x + "px";el.style.top = y + "px";el.style.zIndex = zIndex;let isDragging = false;let baseMousePosition = { x: 0, y: 0 };let dom = data.targetRef || document.getElementById(data.targetId) || el;dom.style.cursor = "move";const onDragStart = (e) => {if (e.button === 0) {isDragging = true;baseMousePosition.x = e.pageX;baseMousePosition.y = e.pageY;window.addEventListener("mousemove", onDraging);}};const onDragEnd = (e) => {isDragging = false;x = parseInt(el.style.left);y = parseInt(el.style.top);window.removeEventListener("mousemove", onDraging);};const onDraging = (e) => {if (isDragging) {el.style.left = e.pageX - baseMousePosition.x + x + "px";el.style.top = e.pageY - baseMousePosition.y + y + "px";}};dom.addEventListener("mousedown", onDragStart);window.addEventListener("mouseup", onDragEnd);},
};const directives = {install: function (app) {app.directive('drag', drag)}
}
export default directives
vue文件使用:
<script setup>
import { ref } from "vue";const dragRef = ref()
const dragOptions= ref({x: 100,y: 200,targetRef: dragRef,
})
</script><template><div v-drag="dragOptions" class="dialog"><div class="dialog_header" ref="dragRef">弹框标题</div><div class="dialog_content">弹框内容</div></div><template>
这里的dragOptions就是配置项,x和y是弹框的初始位置的left和top值,targetRef的值是你希望鼠标在哪个dom元素可以拖拽,如果不传,就默认在整个弹框范围,都可以拖拽。
相关文章:
vue3 拖拽插件(drag)
前端vue项目中,经常会有弹框拖拽的需求,下面介绍常用方法: 1.如果你使用的是elementPlus插件的el-dialog组件,只需要增加draggable属性即可,代码如下: <el-dialogv-model"showDiloag"width"500&quo…...
数据结构--线性表(顺序结构)
1.线性表的定义和基本操作 1.1线性表以及基本逻辑 1.1.1线性表 (1)n(>0)个数据元素的有限序列,记作(a1,a2,...an),其中ai是线性表中的数据元素,n是表的长度。 (2)…...
面试准备111
Java基础 反射 集合 多线程 Synchronized/volatile 线程池 cas atomic 网络 tcp 三次握手/四次挥手 流量控制 拥塞控制 数据结构 算法 Spring 循环依赖 Mybatis 如何防止sql注入 Mysql 索引 索引分类 索引设计原则 事务 四种隔离级别 MVCC 日志 Binlog…...
Spring 的 IOC 和 AOP 是什么,有哪些优点?解密 Spring两大核心概念:IOC与AOP的魅力所在
在现代Java开发中,Spring框架几乎是不可或缺的存在。它不仅简化了开发过程,还提高了软件的灵活性和可维护性。今天,我们要深入探讨Spring中的两个核心概念:IOC(控制反转)和AOP(面向切面编程&…...
第二百六十四节 JPA教程 - JPA查询日期参数示例
JPA教程 - JPA查询日期参数示例 我们可以在查询中使用日期类型值。 以下代码使用EntityManager创建具有两个参数的查询。 然后它传递两个日期类型值。 em.createQuery("SELECT e " "FROM Professor e " "WHERE e.startDate BETWEEN :start AND :en…...
Spring MVC的运行流程详解
Spring MVC作为一个广泛使用的框架,提供了灵活且强大的MVC架构支持。尤其在业务系统中,Spring MVC能够有效地处理大量并发请求,提供良好的用户体验。本文将详细讲解Spring MVC的运行流程,以电商交易系统为案例,帮助读者…...
判断有向图是否为单连通图的算法
判断有向图是否为单连通图的算法 算法描述伪代码C语言实现解释在图论中,单连通图(singly connected graph)是指对于图中的任意两个顶点 m 和 v,如果存在从 m 到 v 的路径,则该路径是唯一的。为了判断一个有向图是否为单连通图,我们需要确保从任意顶点出发,到任意其他顶点…...
php与python建站的区别有哪些
php与Python建站的区别: 1、语言层面Python的特性比php好,更加规范。 2、Python的性能比php高。 3、有只需要启动服务的时候执行一次的代码,在php里每个请求都会被执行一次,Python不需要。虽然php可以通过缓存缩短这方面的差距…...
模型评估与验证:确保模型在未知数据上的表现----示例:使用K折交叉验证评估分类模型、房价预测问题使用K折交叉验证来评估一个线性回归模型的性能
模型评估与验证是机器学习流程中的关键步骤,它帮助我们了解模型在未见过的数据上的泛化能力。交叉验证(Cross-Validation, CV)是一种常用的技术,通过将数据集划分为多个子集并进行多次训练和测试来估计模型的性能。此外࿰…...
awd基础学习
一、常用防御手段 1、改ssh密码 passwd [user] 2、改数据库密码 进入数据库 mysql -uroot -proot 改密码 update mysql.user set passwordpassword(新密码) where userroot; 查看用户信息密码 select host,user,password from mysql.user; 改配置文件 (否则会宕机…...
C#基于SkiaSharp实现印章管理(10)
向PDF文件插入印章图片比之前实现的向图片文件插入印章麻烦得多。 最初的想法是使用PDF浏览控件在线打开PDF文件,然后在控件中实现鼠标移动时动态显示印章,点击鼠标时向当前PDF页面的鼠标点击位置插入图片。由于是.net 8的Winform项目,选…...
通过栈实现字符串中查找是否有指定字符串的存在
题目示例: 分析 由与没有给出字符串的长度,所以只能通过getline一次性处理,而在输入后恰好能倒序处理字符串,以标点符号为分界点,将数字当成字符放到栈里,遇到下一个标点符号时执行查找操作,…...
MongoDB伪分布式部署(mac M2)
1. 序言 本博客是上一博客的进阶版:mac M2安装单机版 MongoDB 7.x,上一博客可以看做是单机、单节点部署MongoDB本博客将介绍单机、多服务部署MongoDB,实际就是伪分布式部署 2. 副本集(Replica Set)方式部署 2.1 什么是副本集? …...
Golang | Leetcode Golang题解之第454题四数相加II
题目: 题解: func fourSumCount(a, b, c, d []int) (ans int) {countAB : map[int]int{}for _, v : range a {for _, w : range b {countAB[vw]}}for _, v : range c {for _, w : range d {ans countAB[-v-w]}}return }...
[ComfyUI]Flux:超美3D微观山水禅意,经典中文元素AI重现,佛陀楼阁山水画卷
在数字艺术和创意领域,[ComfyUI]Flux以其独特的虚实结合技术,已经成为艺术家和设计师们手中的利器。今天,我们激动地宣布,[ComfyUI]Flux带来了一款超美的3D微观山水禅意作品,经典中文元素通过AI技术重现,包…...
Linux 系统 nvm 管理node无法使用
文章目录 一、报错说明二、报错原因三、解决办法四、验证 一、报错说明 centos7服务器使用nvm安装的node之后,只要使用npm或者node,均会出现以下问题。 npm -v node: /lib64/libm.so.6: version GLIBC_2.27 not found (required by node) node: /lib64…...
信号处理快速傅里叶变换(FFT)的学习
FFT是离散傅立叶变换的快速算法,可以将一个信号变换到频域。有些信号在时域上是很难看出什么特征的,但是如果变换到频域之后,就很容易看出特征了。这就是很多信号分析采用FFT变换的原因。另外,FFT可以将一个信号的频谱提取出来&am…...
vue3项目el-table表格行内编辑加输入框校验
核心点 1. el-form的model属性需要跟el-form-item的prop要对应 2. el-form的model属性绑定tableData 3. el-form-item的prop绑定字符串:scope.index.列名(注意有个点) 4. el-form-item需要单独设置rules属性 代码示例 <el-form :mod…...
【Node.js】内置模块FileSystem的保姆级入门讲解
作者:CSDN-PleaSure乐事 欢迎大家阅读我的博客 希望大家喜欢 使用环境:Vscode 本文代码都经由博主PleaSure乐事实操后得出,可以放心使用。 1.FileSystem介绍 Node.js 的 fs(filesystem)模块是一个核心模块,…...
问:LINUXWINDOWS线程CPU时间如何排序?
Linux 在Linux上,你可以使用ps命令结合sort命令来查看和排序进程或线程的CPU使用时间。 查看进程的CPU使用时间并按时间排序 使用ps命令的-o选项可以自定义输出格式,-e选项表示显示所有进程,--sort选项用于排序。 ps -e -o pid,tid,comm,…...
19c补丁后oracle属主变化,导致不能识别磁盘组
补丁后服务器重启,数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后,存在与用户组权限相关的问题。具体表现为,Oracle 实例的运行用户(oracle)和集…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...
连锁超市冷库节能解决方案:如何实现超市降本增效
在连锁超市冷库运营中,高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术,实现年省电费15%-60%,且不改动原有装备、安装快捷、…...
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 提…...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI,使用客户端或是内部自己搭建集成大模型的终端,加速与大型语言模型(LLM)的结合,同时使用检索增强生成(Retrieval Augmented Generation &#…...
SQL慢可能是触发了ring buffer
简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...
C# 表达式和运算符(求值顺序)
求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如,已知表达式3*52,依照子表达式的求值顺序,有两种可能的结果,如图9-3所示。 如果乘法先执行,结果是17。如果5…...
解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist
现象: android studio报错: [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决: 不要动CMakeLists.…...
高考志愿填报管理系统---开发介绍
高考志愿填报管理系统是一款专为教育机构、学校和教师设计的学生信息管理和志愿填报辅助平台。系统基于Django框架开发,采用现代化的Web技术,为教育工作者提供高效、安全、便捷的学生管理解决方案。 ## 📋 系统概述 ### 🎯 系统定…...
Linux 下 DMA 内存映射浅析
序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存,但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程,可以参考这篇文章,我觉得写的非常…...
