vue项目自定义指令,实现元素在页面中的拖拽效果

在项目utils 文件下 新建 hook.ts 

/*** 这是一个自定义指令,用于实现元素的拖拽效果* 使用方式:v-draggable* 为了解决拖拽时结束会触发点击事件click,想只在点击时触发某一个事件,拖拽结束时不触发点击事件 可使用自定义事件 myClick* 使用方式:v-draggable @myClick="handleClick"*/hook.ts
export const draggable = {mounted(el: HTMLElement) {let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; // 鼠标点击位置let dragging = false; // 是否正在拖拽let wasDragging = false; // 是否拖拽过el.onmousedown = dragMouseDown; // 按下鼠标时触发el.onmouseup = closeDragElement; // 松开鼠标时触发el.onclick = preventClickAfterDrag; // 点击时触发function dragMouseDown(e: MouseEvent) {e.preventDefault();dragging = true;pos3 = e.clientX;pos4 = e.clientY;document.onmousemove = elementDrag;}function elementDrag(e: MouseEvent) {if (!dragging) return;pos1 = pos3 - e.clientX;pos2 = pos4 - e.clientY;pos3 = e.clientX;pos4 = e.clientY;el.style.top = (el.offsetTop - pos2) + "px";el.style.left = (el.offsetLeft - pos1) + "px";wasDragging = true;}function closeDragElement() {dragging = false;document.onmousemove = null;if (wasDragging) {wasDragging = false;} else {el.dispatchEvent(new CustomEvent('myClick'));}}function preventClickAfterDrag(e: MouseEvent) {e.stopPropagation();}},unmounted(el: HTMLElement) {el.onmousedown = null;el.onmouseup = null;el.onclick = null;}
}

文件main.ts

import { draggable } from "@/utils/hooks";
// 注册全局指令 v-draggable 拖拽
app.directive("draggable", draggable);

使用时:


使用时 直接在要拖拽的标签上
<div v-draggable>拖拽div</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/8431.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

测试-正交表与工具pairs的介绍使用(1)

目录 正交表 生成正交表 步骤 实操 注意事项 编写测试用例 根据正交表编写测试用例 补充遗漏的重要测试用例 正交表 关于长篇大论也不多介绍了&#xff0c;我们只需要知道正交法的⽬的是为了减少⽤例数⽬&#xff0c;⽤尽量少的⽤例覆盖输⼊的两两组合 正交表的构成&…

抗晃电马达保护器在工业厂房中的应用

安科瑞刘鸿鹏 摘要 随着工业自动化水平的提高&#xff0c;生产线上电动机作为关键设备的使用频率不断增加。然而&#xff0c;工厂生产环境中的电力波动&#xff0c;尤其是晃电现象&#xff0c;会对电动机的正常运转造成干扰&#xff0c;甚至导致设备停机和生产中断。抗晃电型…

linux之调度管理(2)-调度器 如何触发运行

一、调度器是如何在程序稳定运行的情况下进行进程调度的 1.1 系统定时器 因为我们主要讲解的是调度器&#xff0c;而会涉及到一些系统定时器的知识&#xff0c;这里我们简单讲解一下内核中定时器是如何组织&#xff0c;又是如何通过通过定时器实现了调度器的间隔调度。首先我们…

RHCE循环执行的例行性任务--crontab(周期性)

1.每分钟执行命令 2.每小时执行 3.每天凌晨3点半和12点半执行脚本 4.每隔6小时&#xff0c;相当于6,12,18,24点半执行脚本 5.30半点&#xff0c;8-18/2表示早上8点到下午18点之间每隔2小时执行脚本代表 6.每天晚上9点30重启nginx 7.每月1号和10号4点45执行脚本 8. 每周六和周日…

ETLCloud异常问题分析ai功能

在数据处理和集成的过程中&#xff0c;异常问题的发生往往会对业务运营造成显著影响。为了提高ETL&#xff08;提取、转换、加载&#xff09;流程的稳定性与效率&#xff0c;ETLCloud推出了智能异常问题分析AI功能。这一创新工具旨在实时监测数据流动中的潜在异常&#xff0c;自…

Java项目实战II基于Spring Boot的个人云盘管理系统设计与实现(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 一、前言 基于Spring Boot的个人云盘管理系统设计…

还在为慢速数据传输苦恼?Linux 零拷贝技术来帮你!

前言 程序员的终极追求是什么&#xff1f;当系统流量大增&#xff0c;用户体验却丝滑依旧&#xff1f;没错&#xff01;然而&#xff0c;在大量文件传输、数据传递的场景中&#xff0c;传统的“数据搬运”却拖慢了性能。为了解决这一痛点&#xff0c;Linux 推出了 零拷贝 技术&…

密码学是如何保护数据传输的安全性?

密码学通过一系列算法和协议来保护数据传输的安全性。 一、加密技术 对称加密算法 原理&#xff1a;使用相同的密钥进行加密和解密。应用&#xff1a;在数据传输过程中&#xff0c;发送方和接收方共享一个密钥&#xff0c;数据在传输前被加密&#xff0c;接收方使用相同的密钥…

python怎么打开py文件

1、首先在资源管理器里复制一下py文件存放的路径&#xff0c;按下windows键&#xff0b;r&#xff0c;在运行里输入cmd&#xff0c;回车打开命令行&#xff1a; 2、在命令行里&#xff0c;先切换到py文件的路径下面&#xff0c;接着输入“python 文件名.py ”运行python文件&a…

云计算——ACA学习 云计算核心技术

作者简介&#xff1a;一名云计算网络运维人员、每天分享网络与运维的技术与干货。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​ 写在前面 本系列将会持续更新云计算阿里云ACA的学习&#xff0c;了解云计算及网络安全相关…

企业办公管理软件排名 | 九款企业管理软件助你制胜职场!(好用+实用+全面)

在寻找合适的企业办公管理软件时&#xff0c;你是否感到困惑不已&#xff0c;不知道从众多选项中选择哪一个&#xff1f; 一款好的管理软件不仅能简化工作流程&#xff0c;还能增强数据安全性&#xff0c;优化决策支持。 以下是九款备受推崇的企业管理软件&#xff0c;它们将助…

DNS服务器

DNS服务器 1、简介 DNS域名解析服务器&#xff0c;它作为将域名和IP地址相互映射的一个分布式数据库&#xff0c;端口号为53&#xff0c;通常使用UDP协议&#xff0c;但是在没有查询到完整的信息时&#xff0c;会以TCP这个协议来重新查询&#xff0c;所以在启动NDS服务器时&a…

顾荣辉在新加坡金融科技节发表主旨演讲:安全不仅是竞争优势,更是共同责任

在全球数字化和去中心化进程中&#xff0c;Web3的作用日益凸显&#xff0c;安全问题也日益成为行业的焦点。在这一背景下&#xff0c;顾荣辉教授于新加坡金融科技节&#xff08;SFF&#xff09;上发表主旨演讲《超越代码&#xff0c;引领信任》。顾教授在演讲中深入阐述了安全在…

Leetcode328奇偶链表,Leetcode21合并两个有序链表,Leetcode206反转链表 三者综合题

题目描述 思路分析 这题的思路就和我们的标题所述一样&#xff0c;可以看作是这3个题的合并&#xff0c;但是稍微还有一点点区别 比如&#xff1a;奇偶链表这道题主要是偶数链在了奇数后面&#xff0c;字节这个的话是奇偶链表分离了 所以字节这题的大概思路就是&#xff1a; …

「Mac玩转仓颉内测版1」入门篇1 - Cangjie环境的搭建

本篇详细介绍在Mac系统上快速搭建Cangjie开发环境的步骤&#xff0c;涵盖VSCode的下载与安装、Cangjie插件的离线安装、工具链的配置及验证。通过这些步骤&#xff0c;确保开发环境配置完成&#xff0c;为Cangjie项目开发提供稳定的基础支持。 关键词 Cangjie开发环境搭建VSC…

2023数学分析【南昌大学】

计算 求极限 lim ⁡ n → ∞ ( 1 n 2 + 1 2 + 1 n 2 + 2 2 + ⋯ + 1 n 2 + n 2 ) \mathop{\lim }\limits_{n \to \infty } \left( \frac{1}{{\sqrt {n^2 + 1^2} }} + \frac{1}{{\sqrt {n^2 + 2^2} }} + \cdots + \frac{1}{{\sqrt {n^2 + n^2} }} \right) n→∞lim​(n2+12 ​1…

从技术创新到商业应用,智象未来(HiDream.ai)创新不止步

在人工智能领域的最新动态中&#xff0c;智象未来&#xff08;HiDream.ai&#xff09;公司&#xff0c;作为全球领先的多模态生成式人工智能技术先驱&#xff0c;已经引起了广泛的行业瞩目。该公司专注于深度学习和计算机视觉技术的融合&#xff0c;致力于开发和优化视觉多模态…

ssm基于Vue的戏剧推广网站+vue

系统包含&#xff1a;源码论文 所用技术&#xff1a;SpringBootVueSSMMybatisMysql 免费提供给大家参考或者学习&#xff0c;获取源码看文章最下面 需要定制看文章最下面 目 录 摘 要 I Abstract II 第1章 绪论 1 1.1 课题背景 1 1.2 课题意义 1 1.3 研究内容 1 第2…

利用泰勒公式近似计算10的平方根

文章目录 1. 泰勒公式是什么2、利用泰勒公式计算 10 \sqrt{10} 10 ​第 1 步&#xff1a;泰勒级数展开第 2 步&#xff1a;计算各阶导数第 3 步&#xff1a;在 x 9 x 9 x9 处计算各阶导数第 4 步&#xff1a;构建各阶泰勒展开式第 5 步&#xff1a;计算 f ( 10 ) f(10) f(1…

AI芯片:推动高性能计算场景的关键力量

​ 大家好&#xff0c;我是Shelly&#xff0c;一个专注于输出AI工具和科技前沿内容的AI应用教练&#xff0c;体验过300款以上的AI应用工具。关注科技及大模型领域对社会的影响10年。关注我一起驾驭AI工具&#xff0c;拥抱AI时代的到来。 AI工具集1&#xff1a;大厂AI工具【共2…