Vue中实现div的任意移动

前言

在系统应用中,像图片,流程预览及打印预览等情况,当前视窗无法全部显示要预览的全部内容,设置左右和上下滚动条后,如果用鼠标拖动滚动条,又不太便利,如何用鼠标随意的移动呢?

核心方法及事件

可以借助mousedownmouseupmousemove三个事件来处理内容的移动与起始、结束的控制,再借助getComputedStyle动态设置移动内容的left,top,以实现区域的随意移动。

简单代码示例

<template><div><div style="display: flex; justify-content: center"><div class="main"></div></div></div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
onMounted(() => {moveNode()
})
function moveNode() {const child = document.querySelector('.main')let isDragging = falselet prevX = 0let prevY = 0child.addEventListener('mousedown', function (e) {isDragging = trueprevX = e.clientXprevY = e.clientY})child.addEventListener('mouseup', function () {isDragging = false})child.addEventListener('mousemove', function (e) {if (isDragging) {const diffX = e.clientX - prevXconst left = parseInt(window.getComputedStyle(child).left) || 0child.style.left = `${left + diffX}px`prevX = e.clientXconst diffY = e.clientY - prevYconst top = parseInt(window.getComputedStyle(child).top) || 0child.style.top = `${top + diffY}px`prevY = e.clientY}})
}
</script>
<style lang="less" scoped>
.main {position: relative;left: 0;top: 0;right: 0;bottom: 0;height: 500px;width: 500px;background-color: red;cursor: move;
}
</style>

动态演示

在这里插入图片描述

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

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

相关文章

wpf devexpress自定义编辑器

打开前一个例子 步骤1-自定义FirstName和LastName编辑器字段 如果运行程序&#xff0c;会通知编辑器是空。对于例子&#xff0c;这两个未命名编辑器在第一个LayoutItem(Name)。和最终用户有一个访客左右编辑器查阅到First Name和Last Name字段&#xff0c;分别。如果你看到Go…

【开题报告】基于SpringBoot的二手汽车交易平台的设计与实现

1.研究背景 随着社会经济的不断发展&#xff0c;二手汽车交易市场逐渐壮大&#xff0c;二手汽车交易平台作为一种重要的电子商务形式备受关注。本文基于Spring Boot框架&#xff0c;旨在设计与实现一个高效、安全、用户友好的二手汽车交易平台。本文将深入探讨二手汽车市场发展…

Windows安装nvm【node.js版本管理工具】

目录 下载安装包 安装 配置 配置node的国内镜像源 配置npm的国内镜像源 常用命令 查看可安装的node版本 安装指定的版本 查看已有的node版本列表 切换版本 下载安装包 https://github.com/coreybutler/nvm-windows/releases/tag/1.1.11 安装 安装过程就不贴了&#xff0…

Pytorch D2L Subplots方法对画图、图片处理

问题代码 def show_images(imgs, num_rows, num_cols, titlesNone, scale1.5): #save """绘制图像列表""" figsize (num_cols * scale, num_rows * scale) _, axes d2l.plt.subplots(num_rows, num_cols, figsizefigsize) axes axes.flatten…

sqli-labs关卡19(基于http头部报错盲注)通关思路

文章目录 前言一、回顾上一关知识点二、靶场第十九关通关思路1、判断注入点2、爆数据库名3、爆数据库表4、爆数据库列5、爆数据库关键信息 总结 前言 此文章只用于学习和反思巩固sql注入知识&#xff0c;禁止用于做非法攻击。注意靶场是可以练习的平台&#xff0c;不能随意去尚…

SpringBoot3自定义Starter步骤

参考: https://www.yuque.com/leifengyang/springboot3/lliphvul8b19pqxp#fR0xi 想要实现一个聊天机器人Starter: 场景&#xff1a;抽取聊天机器人场景&#xff0c;它可以打招呼。 效果&#xff1a;任何项目导入此starter都具有打招呼功能&#xff0c;并且问候语中的人名需要…

滑动窗口练习(一)— 固定窗口最大值问题

题目 假设一个固定大小为W的窗口&#xff0c;依次划过arr&#xff0c; 返回每一次滑出状况的最大值 例如&#xff0c;arr [4,3,5,4,3,3,6,7], W 3 返回&#xff1a;[5,5,5,4,6,7] 暴力对数器 暴力对数器方法主要是用来做校验&#xff0c;不在乎时间复杂度&#xff0c;逻辑上…

Network(四)NAT实现方式与VRRP概述

一 NAT 1 NAT概述 &#xff08;1&#xff09;NAT的作用 Network Address Translation&#xff0c;网络地址转换 通过将内部网络的私有IP地址转换成全球唯一的公网IP地址使内部网络可以连接到互联网。 &#xff08;2&#xff09;私有IP地址分类 A类10.0.0.0~10.255.255.…

云计算(Docker)

Docker简介 Docker 是一个开源的应用容器引擎&#xff0c;基于 Go 语言&#xff0c;并遵从 Apache2.0 协议开源。它可以让开发者打包应用以及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何流行的 Linux 机器上&#xff0c;也可以实现虚拟化。Docker 可用于开发…

计蒜客T3364 蒜头君的回文串(C++语言实现)

【题目描述】回文串&#xff0c;是指顺着读和倒着读顺序一样的字符串&#xff0c;比如说abccba就是一个回文串。而abc不是回文串&#xff0c;因为abc倒着读是cba。在这里&#xff0c;我们只考虑字母和数字&#xff0c;比如说abccb a&#xff0c;为一个回文串&#xff08;因为我…

飞天使-django之数据库简介

文章目录 增删改查解决数据库不能存储中文问题创建表数据类型表的基本操作主键唯一键 unique外键实战 增删改查 四个常用的语句查询 : insert delete update select insert into student(Sno,name) values(95001,"张三") delete from student where name张三 upda…

ubuntu22.04换源

1、系统信息 lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 22.04.3 LTS Release: 22.04 Codename: jammy2、进入 /etc/apt/ 目录&#xff1a; cd /etc/apt/ 3、备份默认源文件 sudo cp sources.list sources.list_bak 4、编…

Flink之KeyedState

前面的文章中介绍过Operator State,这里介绍一下Keyed State. 在使用Operator State时必须要实现CheckpointFunction接口,而Keyed State则不需要,在使用keyBy(...)分组分组后,调用的函数必须是实现RichFuntion接口的函数才可以使用Keyed State.同样使用Keyed State也必须开启Ch…

九、Linux用户管理

1.基本介绍 Linux系统是一个多用户多任务的操作系统&#xff0c;任何一个要使用系统资源的用户&#xff0c;都必须首先向系统管理员申请一个账号&#xff0c;让后以这个账号的身份进入系统 2.添加用户 基本语法 useradd 用户名 应用案例 案例1&#xff1a;添加一个用户 m…

Vue中的watch的使用

先看下Vue运行机制图 那么我们思考一件事&#xff0c;vue是通过watcher监听数据的变化然后给发布-订阅&#xff0c;这样实现了dom的渲染&#xff0c;那么我们思考一件事&#xff0c;我们往往需要知道一个数据的变化然后给页面相应的渲染&#xff0c;那么我们工作中在组件中的数…

可拖动、可靠边的 popupWindow 实现

0 背景 开发要实现一个可以拖动的圆角小窗&#xff0c;要求松手时&#xff0c;哪边近些靠哪边。并且还规定了拖动范围。样式如下&#xff1a; 1 实现 首先把 PopupWindow 的布局文件 pop.xml 实现 <?xml version"1.0" encoding"utf-8"?> <R…

抽象工厂模式-C++实现

抽象工厂模式是一种创建型设计模式&#xff0c;它提供了一种在不指定具体产品类的情况下创建一系列相关或依赖对象的方法。 抽象工厂模式分为四个角色&#xff1a;抽象工厂、具体工厂、抽象产品、具体产品。 抽象工厂和工厂方法其实很类似&#xff0c;但也有一定的区别&#…

7.22 SpringBoot项目实战【收藏 和 取消收藏】

文章目录 前言一、编写控制器二、编写服务层三、Postman测试最后前言 本系统还支持 收藏图书,就是对心仪的书加一下收藏,大家都懂,这是一个很常见的功能。 那么我们来看看怎么来做,先分析一下:【一个人】对【一本书】只需【收藏一次】,但可以【收藏N本】不同的书,收藏…

【Java并发编程六】多线程越界问题

ArrayList()越界错误 import java.util.ArrayList; public class myTest implements Runnable {static ArrayList<Integer> a new ArrayList<>(10);public static void main(String[] args) throws InterruptedException {Thread t1 new Thread(new myTest());T…

Mac M1 M1 pro安装 protobuf 2.5.0

因为项目中的protobuf是2.5.0版本&#xff0c;但是旧版本的protobuf 不支持M1&#xff0c;此时需要修改源码重新编译 操作步骤&#xff1a; 从git上面下载对应版本的protobuf&#xff0c;地址&#xff1a;Release Protocol Buffers v2.5.0 protocolbuffers/protobuf GitHub…