vue3实现元素拖拽移动功能

效果图

实现拖拽移动

首先我们给需要实现功能的元素加一个draggable="true"让元素能够被拖拽

先来认识两个搭配draggable属性一起使用的事件——ondragstartondragend,它们的定义分别为:
①. ondragstart 事件在用户开始拖动元素或选择的文本时触发
②. ondragend 事件在用户完成元素或首选文本的拖动时触发。

代码:

<script lang="ts" setup>
import {ref, reactive, onMounted} from 'vue'let initWidth = ref(0) // 父元素的宽-自适应值let initHeight = ref(0) // 父元素的高-自适应值let startclientX = ref(0) // 元素拖拽前距离浏览器的X轴位置let startclientY = ref(0) //元素拖拽前距离浏览器的Y轴位置let elLeft = ref(0) // 元素的左偏移量let elTop = ref(0) // 元素的右偏移量let back_box = ref()// 页面初始化function initBodySize() {initWidth.value = back_box.value.clientWidth; // 拿到父元素宽initHeight.value = initWidth.value * ((1080 * 0.88) / (1920 - 1080 * 0.02)); // 根据宽计算高实现自适应}// 拖拽开始事件function dragstart(e) {console.log(e);startclientX.value = e.clientX; // 记录拖拽元素初始位置startclientY.value = e.clientY;}// 拖拽完成事件function dragend(e) {console.log(e);let x = e.clientX - startclientX.value; // 计算偏移量let y = e.clientY - startclientY.value;elLeft.value += x; // 实现拖拽元素随偏移量移动elTop.value += y;}onMounted(()=>{initBodySize()})
</script>
<template><div id="drag"><div class="back_box" ref="back_box">这是一个背景<divclass="drag_box"draggable="true"@dragstart="dragstart($event)"@dragend="dragend($event)":style="`left:${elLeft}px;top:${elTop}px`">这是一个蓝色可拖拽元素</div></div></div></template><style scoped>.back_box {background: #ccc;width: 50vw;height: 50vh;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -30%);}.drag_box {width: 100px;height: 100px;background: skyblue;position: absolute;z-index: 10;user-select: none; /* 不可选中,为了拖拽时不让文字高亮 */}</style>

更详细的可以参考:

手把手教你学会用vue实现元素拖拽移动+滚轮缩放功能_vue 拖拽_LangForOne的博客-CSDN博客

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

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

相关文章

如何使用录屏软件在电脑录制PDF文件

我有一个PDF文件&#xff0c;想用录屏软件将它录制下来并添加上详细的注释&#xff0c;然后发给客户看&#xff0c;请问应该如何录制呢&#xff1f;有没有推荐的录屏软件呢&#xff1f; 不用担心&#xff0c;本文将会详细的为您讲解如何使用录屏软件在电脑端录制PDF文件&#…

PTA 哈利波特的考试

哈利波特要考试了&#xff0c;他需要你的帮助。这门课学的是用魔咒将一种动物变成另一种动物的本事。例如将猫变成老鼠的魔咒是haha&#xff0c;将老鼠变成鱼的魔咒是hehe等等。反方向变化的魔咒就是简单地将原来的魔咒倒过来念&#xff0c;例如ahah可以将老鼠变成猫。另外&…

从0到1搭建kafka集群

准备服务器 3台服务器对应3个node&#xff0c;分别如下&#xff1a; node1:192.168.1.101 node2:192.168.1.102 node3:192.168.1.103 下载安装包 下载zookeeper https://dlcdn.apache.org/zookeeper/ 下载kafka https://kafka.apache.org/downloads 安装步骤 zookeeper…

使用MechanicalSoup库的爬虫程序

1. 首先&#xff0c;我们需要导入MechanicalSoup库和requests库&#xff0c;这两个库都是Python中爬虫常用的库。 2. 接着&#xff0c;我们要设置一个代理服务器&#xff0c;使用proxy_host和proxy_port参数来指定。 3. 使用requests.get方法来获取网页的HTML代码。 4. 使用Bea…

内存函数​(memcpy、memmove、memset、memcmp)

目录 一、memcpy的使用和实现 使用&#xff1a; 模拟实现&#xff1a; 二、memmove 使用和模拟实现 模拟实现&#xff1a; 2.1难点&#xff1a; 覆盖拷贝所在的问题 memset的使用 memcmp的函数的使用​ 一、memcpy的使用和实现 memcpy 拷贝的就是不重叠的内存。 参数…

网站被攻击了该怎么办?如何恢复网站,如何避免网站被攻击?

小德今天先带大家了解一下网站攻击的类型有哪些,以下简单跟各位分析一下: 网站攻击一般分为3类&#xff0c;分别为ARP欺骗攻击、CC攻击、DDOS流量攻击。 一、先说ARP欺骗攻击 如果要发起ARP欺骗攻击&#xff0c;首先要与网站为同一个机房、同一个IP段、同一个VLAN的服务器的…

Linux(fork+exec创建进程)

1.进程创建 内核设计与实现43页; 执行了3次ps -f ,ps -f的父进程的ID(PPID)都是一样的,即bash. 实际上Linux上这个bash就是不断的复制自身,然后把复制出来的用exec替换成想要执行的程序(比如ps); 运行ps,发现ps是bash的一个子进程;原因就是bash把自己复制一份,然后替换成ps;…

linux logrotate日志轮询设置案例二

1.编辑/etc/logrotate.conf文件&#xff0c;添加如下配置&#xff0c;并保存 /var/log/ztj.log {missingokdaily create 644 root root sharedscriptspostrotateif [ -f /var/run/syslogd.pid ];then/bin/kill -HUP $(/bin/cat /var/run/syslogd.pid) >/dev/null 2>…

Python----高阶函数

高阶函数&#xff1a;把函数作为参数传入&#xff0c;这样的函数称为高阶函数&#xff0c;高阶函数是函数式编程的体现。函数式编程就是指这种高度抽象的编程范式。 高阶函数的由来 在Python中&#xff0c;abs()函数可以完成对数字求绝对值计算。 ① 正数的绝对值是它本身 ②…

竞赛选题 题目:基于深度学习的中文对话问答机器人

文章目录 0 简介1 项目架构2 项目的主要过程2.1 数据清洗、预处理2.2 分桶2.3 训练 3 项目的整体结构4 重要的API4.1 LSTM cells部分&#xff1a;4.2 损失函数&#xff1a;4.3 搭建seq2seq框架&#xff1a;4.4 测试部分&#xff1a;4.5 评价NLP测试效果&#xff1a;4.6 梯度截断…

dbeaver连接amabri-hbase

目录 尝试过程 解决之道 总结 尝试过程 注意此章节为记录试错过程&#xff0c;无需跟随操作&#xff0c;仅作试错记录。真正操作方法请看“解决之道”章节 环境ambari安装的hbase2.1.6 使用apche phoenix默认驱动配置 备注&#xff1a;Apache Phoenix 是一个开源的、基于…

RocketMq批量拉取消息失败处理

Consumer的MessageListenerConcurrently监听接口的consumeMessage()方法的第一个参数为消息列 表&#xff0c;但默认情况下每次只能消费一条消息。若要使其一次可以消费多条消息&#xff0c;则可以通过修改 Consumer的consumeMessageBatchMaxSize属性来指定。不过&#xff0c;该…

pytorch 多卡并行训练

目录 设置参数&#xff1a; 训练时参数&#xff1a; 调用命令&#xff1a; 设置参数&#xff1a; import argparseparser argparse.ArgumentParser()parser.add_argument(--batch_size, typeint, default64, helpBatch size for training)parser.add_argument(--local_rank…

MySQL多表查询:原理、技巧与实践

一、简介 在MySQL数据库中&#xff0c;多表查询是一种非常实用的技术&#xff0c;它允许用户在一个查询中跨多个表检索数据。通过将来自不同表的数据组合起来&#xff0c;我们可以得到更全面、更准确的结果。多表查询在处理复杂业务逻辑或数据关联紧密的系统中具有重要意义。本…

Python edge-tts库全部声音模型一览表

下面是edge-tts的声音模型&#xff0c;zh-CN为中文语音模型 Name: af-ZA-AdriNeural Gender: Female Name: af-ZA-WillemNeural Gender: Male Name: am-ET-AmehaNeural Gender: Male Name: am-ET-MekdesNeural Gender: Female Name: ar-AE-FatimaNeural Gender: Female N…

fastadmin 如何引入自己的js

在需要的界面中&#xff1a;如何实例说明&#xff1a; 中<script> function zhuruJs(url) { let temp document.createElement( script ); temp.setAttribute( type, text/javascript" );temp.src urL; document.head . appendChild(temp); zhuruJs(location…

ffmpeg 免安装,配置环境变量

1、下载ffmpeg https://download.csdn.net/download/qq284489030/88579595 2、解压 解压ffmpeg-4.4-essentials_build.zip到目标文件夹&#xff0c;比如 d:\apps下&#xff1b; 3、配置环境变量 &#xff08;1&#xff09;电脑桌面鼠标右键点击“此电脑”&#xff0c;弹出…

MySQL通配符和正则表达式

一、通配符 1.% 匹配0&#xff0c;1&#xff0c;多个字符&#xff0c;但不匹配NULL 2._ 匹配单个字符 3.[charlist] 匹配字符列中的任何单一字符 4.[^charlist] 或 [!charlist] 匹配不在字符列中的任何单一字符 二、正则表达式 通配符的LIKE替换为REGEXP LIKE 匹配整个列&…

脚本格式问题记录

服务器上的一些脚本迁移到其他服务上发生的小问题 问题&#xff1a;执行一个在win10系统编写好的shell脚本&#xff0c;放到Linux上执行报错如下&#xff1a; bash: ./xxx.sh: /bin/bash^M: bad interpreter: No such file or directory 原因&#xff1a;window系统写的脚本&a…

iMazing是什么软件?2024最新版本如何下载

iMazing是一款功能强大的iOS设备管理软件&#xff0c;它可以帮助用户备份和管理他们的iPhone、iPad或iPod Touch上的数据。除此之外&#xff0c;它还可以将备份数据转移到新的设备中、管理应用程序、导入和导出媒体文件等。本文将详细介绍iMazing的功能和安全性&#xff0c;并教…