Vue3实现可视化拖拽标签小程序

介绍

在这里插入图片描述

实现功能:可视化标签拖拽,双击标签可修改标签内容

HTML结构

<div class="box" v-move><div class="header">标签1</div><div @dblclick="startEditing" v-if="!isEditing">{{content}}</div><input type="text" v-model="editedContent" @blur = 'stopEditing' v-if="isEditing">
</div>

一个大DIV包含里面存放两个DIV一个input
header为头部标签名称
内容区域绑定双击鼠标事件,触发开始修改事件(startEditing),使用v-if进行标签的显示和隐藏操作
input标签,事件绑定为修改内容,绑定获取焦点事件(@blue=“stopEditing”),并且绑定和内容区域一样的变量用来控制显示隐藏,一方为显示另一方必定为隐藏

TS部分

import { Directive, DirectiveBinding } from "vue";const vMove: Directive<any, void> = {mounted(el: HTMLElement, binding: DirectiveBinding) {// 创建一个变量 moveElement,表示 DOM 元素的子元素(假设这是要拖动的元素)const moveElement: HTMLDivElement = el.firstElementChild as HTMLDivElement;// 鼠标按下事件处理函数const mouseDown = (e: MouseEvent) => {// 计算鼠标相对于元素的偏移量const X = e.clientX - el.offsetLeft;const Y = e.clientY - el.offsetTop;// 鼠标移动事件处理函数const move = (e: MouseEvent) => {// 更新元素的位置,实现拖动效果el.style.left = e.clientX - X + "px";el.style.top = e.clientY - Y + "px";};// 添加鼠标移动事件监听器document.addEventListener("mousemove", move);// 添加鼠标松开事件监听器,用于停止拖动document.addEventListener("mouseup", () => {document.removeEventListener("mousemove", move);});};// 将鼠标按下事件处理函数添加到元素上moveElement.addEventListener("mousedown", mouseDown);},
};

采用自定义指令进行设置移动组件,DirectiveDirectiveBinding:这是Vue.js中用于自定义指令的一些类型和功能。自定义指令允许你在DOM元素上附加自定义行为。Directive 是自定义指令的基本类型,而 DirectiveBinding 是与指令绑定的数据的类型。

上述代码定义了一个名为 vMove 的自定义指令,它会在元素上附加拖动行为。当鼠标在 moveElement(元素的子元素)上按下时,启动拖动操作,通过鼠标移动事件更新元素的位置,并在鼠标松开时停止拖动。这个自定义指令可以在Vue.js应用中使用,将其添加到需要拖动的元素上,以实现拖拽功能。

<script setup lang="ts">
// 导入 Vue 和自定义指令相关的模块
import { ref, Directive, DirectiveBinding } from "vue";// 自定义指令 vMove 的实现
const vMove: Directive<any, void> = (el: HTMLElement, binding: DirectiveBinding) => {// 获取需要移动的 DOM 元素,假设它是传入元素的第一个子元素let moveElement: HTMLElement = el.firstElementChild as HTMLDivElement;console.log(moveElement);// 鼠标按下事件处理函数const mouseDown = (e: MouseEvent) => {// 计算鼠标点击位置相对于元素左上角的偏移量let X = e.clientX - el.offsetLeft;let Y = e.clientY - el.offsetTop;// 鼠标移动事件处理函数const move = (e: MouseEvent) => {console.log(e);// 更新元素的位置,实现拖动效果el.style.left = e.clientX - X + "px";el.style.top = e.clientY - Y + "px";};// 添加鼠标移动事件监听器,以便拖动元素document.addEventListener("mousemove", move);// 添加鼠标松开事件监听器,停止拖动document.addEventListener("mouseup", () => {document.removeEventListener("mousemove", move);});};// 将鼠标按下事件处理函数添加到移动元素上moveElement.addEventListener("mousedown", mouseDown);console.log(binding);
};// 使用 ref 创建响应式数据
const content = ref('内容'); // 原始内容
const isEditing = ref(false); // 是否处于编辑模式
const editedContent = ref(''); // 编辑后的内容// 进入编辑模式
const startEditing = () => {isEditing.value = true;editedContent.value = content.value; // 将原始内容设置为编辑后的内容
}// 退出编辑模式
const stopEditing = () => {isEditing.value = false;content.value = editedContent.value; // 保存编辑后的内容
}</script><template><div class="box" v-move><div class="header">标签1</div><!-- 使用双击事件触发编辑模式 --><div @dblclick="startEditing" v-if="!isEditing">{{ content }}</div><!-- 编辑模式下显示输入框 --><input type="text" v-model="editedContent" @blur="stopEditing" v-if="isEditing"></div>
</template><style scoped>
.box {position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 200px;height: 200px;border: 3px solid;background: #f59c09;.header {height: 20px;background: #f59c09;color: white;}
}
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

开始投简历了

歇了好长时间&#xff0c;也该开始找点事情折腾了。 第一周基本上是没有什么太多的消息&#xff0c;大部分情况就是收到回复的邮件说你很优秀&#xff0c;希望下次合作这种礼节性的拒绝邮件。 给人有点感觉都是在忽悠&#xff0c;有点感觉现在的公司一边到处拒绝&#xff0c;…

实现Map批量赋值,我只需24秒搞定!

函数的功能是将一组键值对批量赋值给Map中的键。在Java中&#xff0c;通常使用Map的put方法逐个将键值对赋值给Map&#xff0c;但在某些场景下&#xff0c;可能需要一次性将多个键值对赋值给Map。 函数功能&#xff1a;Map批量赋值 参数1&#xff1a;参数名称&#xff1a;targ…

K8S自动化运维容器Docker集群

K8S&#xff1a;K8S自动化运维容器化(Docker)集群 一.k8s概述 1.k8s是什么 &#xff08;1&#xff09;K8S全程为Kubernetes&#xff0c;由于K到S直接有8个字母简称为K8S。 &#xff08;2&#xff09;版本&#xff1a;目前一般是1.18~1.2.0&#xff0c;后续可能会到1.24-1.2…

机器学习与数据分析

【数据清洗】 异常检测 孤立森林&#xff08;Isolation Forest&#xff09;从原理到实践 效果评估&#xff1a;F-score 【1】 保护隐私的时间序列异常检测架构 概率后缀树 PST – &#xff08;异常检测&#xff09; 【1】 UEBA架构设计之路5&#xff1a; 概率后缀树模型 【…

Spring 怎么解决循环依赖的呢?

Spring 怎么解决循环依赖 什么是循环依赖那 Spring 怎么解决循环依赖的呢&#xff1f;为什么要三级缓存&#xff1f;⼆级不⾏吗&#xff1f; 什么是循环依赖 Spring 循环依赖&#xff1a;简单说就是自己依赖自己&#xff0c;或者和别的 Bean 相互依赖。 只有单例的 Bean 才存在…

【肝素··】

Recent advances in the management of venous thromboembolism Korean J Hematol 2010;45:8-13 Serpin Structure, Mechanism, and Function-2002 糖胺聚糖 凝血 Fibrinolysis | Detailed Pedia

计算机视觉的应用13-基于SSD模型的城市道路积水识别的应用项目

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下计算机视觉的应用13-基于SSD模型的城市道路积水识别的应用项目。今年第11号台风“海葵”后部云团的影响&#xff0c;福州地区的降雨量突破了历史极值&#xff0c;多出地方存在严重的积水。城市道路积水是造成交通拥…

前端基础5——UI框架Layui

文章目录 一、基本使用二、管理后台布局2.1 导航栏2.2 主题颜色2.3 字体图标 三、栅格系统四、卡片面板五、面包屑六、按钮七、表单八、上传文件九、数据表格9.1 table模块常用参数9.2 创建表格9.3 表格分页9.4 表格工具栏9.5 表格查询9.5.1 搜索关键字查询9.5.2 选择框查询 9.…

微信“刷掌支付”上线!出门带手就可以了~

从2023年9月5日起&#xff0c;微信支付联合广东7-Eleven便利店正式发布了刷掌支付服务。用户可以在收银台结账时选择刷掌支付作为支付方式。这是全国首批支持微信刷掌支付的便利店&#xff0c;也是刷掌支付在广州地区的首次社会面应用。 目前&#xff0c;广东地区已经有超过150…

【JUC系列-04】精通Synchronized底层的实现原理

JUC系列整体栏目 内容链接地址【一】深入理解JMM内存模型的底层实现原理https://zhenghuisheng.blog.csdn.net/article/details/132400429【二】深入理解CAS底层原理和基本使用https://blog.csdn.net/zhenghuishengq/article/details/132478786【三】熟练掌握Atomic原子系列基本…

如何将 PDF 转换为 Word:前 5 个应用程序

必须将 PDF 转换为 Word 才能对其进行编辑和自定义。所以这里有 5 种很棒的方法 PDF 文件被广泛使用&#xff0c;因为它非常稳定且难以更改。这在处理法律合同、财务文件和推荐信等重要文件时尤其重要。但是&#xff0c;有时您可能需要编辑 PDF 文件。最好的方法是使用应用程序…

NLP(1)--NLP基础与自注意力机制

目录 一、词向量 1、概述 2、向量表示 二、词向量离散表示 1、one-hot 2、Bag of words 3、TF-IDF表示 4、Bi-gram和N-gram 三、词向量分布式表示 1、Skip-Gram表示 2、CBOW表示 四、RNN 五、Seq2Seq 六、自注意力机制 1、注意力机制和自注意力机制 2、单个输出…

Windows Server 系统各版本及授权说明(附下载地址

本文为Windows Server系统各版本差异对比及授权说明。 会对相关目前仍主流使用的相关Windows Server系统版本和相关授权进行对比和功能说明。 WindowsServer2012 R2 Windows Server 2012 R2授权方式是按照物理CPU数量进行授权&#xff0c;比如物理服务器CPU插槽数量2&#xff…

ChatGPT新增超强插件:文本直接生成视频、海报,支持自定义修改!

全球著名在线设计平台Canva&#xff0c;在ChatGPT Plus&#xff08;GPT-4&#xff09;上推出了插件功能&#xff0c;用户通过文本提示&#xff0c;几秒钟就能生成演示文稿、PPT插图、电子书封面、宴会邀请函等各种精美设计海报&#xff0c;同时支持生成视频。 该插件最强大的功…

《机器人学一(Robotics(1))》_台大林沛群 第 4 周【机械臂 逆运动学】 Quiz 4

待完善&#xff1a; 第5-7【暂时不清楚如何确定】 谁做出来了&#xff0c;麻烦指下路&#xff0c;谢谢&#xff01; 第6-7&#xff1a; 连猜带蒙&#x1f923; #################################################### 整个流程 走下来&#xff0c;只剩一个解了 不理解 第5-…

【力扣每日一题05】数组篇--加一

一、题目 给定一个由 整数 组成的 非空 数组所表示的非负整数&#xff0c;在该数的基础上加一。 最高位数字存放在数组的首位&#xff0c; 数组中每个元素只存储单个数字。 你可以假设除了整数 0 之外&#xff0c;这个整数不会以零开头。 示例 1&#xff1a; 输入&#xff1…

【HTML专栏3】!DOCTYPE、lang、字符集的作用

本文属于HTML/CSS专栏文章&#xff0c;适合WEB前端开发入门学习&#xff0c;详细介绍HTML/CSS如果使用&#xff0c;如果对你有所帮助请一键三连支持&#xff0c;对博主系列文章感兴趣点击下方专栏了解详细。 博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;HTML/CS…

nginx请求接口转发-浏览器访问80端口,要把请求转发至8882

1、需求 浏览器访问80端口&#xff0c;要把请求转发至8882 2、实现 修改ngixn配置文件 ngin配置文件在nginx安装目录/nginx/conf文件夹下 cd /usr/local/nginx/confvi ngin.conf修改server配置 server {listen 80;server_name localhost;location / {proxy_pass …

怎么做手机App测试?app测试详细流程和方法介绍

APP测试 1、手机APP测试怎么做&#xff1f; 手机APP测试&#xff0c;主要针对的是android和ios两大主流操作系统&#xff0c;主要考虑的就是功能性、兼容性、稳定性、易用性&#xff08;也就是人机交互&#xff09;、性能。 手机APP测试前的准备&#xff1a; 1.使用同类型的…

docker容器运行成功但无法访问,原因分析及对应解决方案(最新,以Tomcat为例,亲测有效)

原因分析&#xff1a; 是否能访问当运行docker容器虚拟机&#xff08;主机&#xff09;地址 虚拟机对应的端口号是否开启或者防墙是否关闭 端口映射是否正确&#xff08;这个是我遇到的&#xff09; tomcat下载的是最新版&#xff0c;docker运行后里面是没有东西的&am…