当前位置： 首页 > news >正文

vue实现可缩放拖拽盒子(亲测可用)

news 文章来源：https://blog.csdn.net/m0_71349739/article/details/132344096 2025/5/19 6:11:38

特征

  • 没有依赖
  • 使用可拖动，可调整大小或两者兼备
  • 定义用于调整大小的句柄
  • 限制大小和移动到父元素或自定义选择器
  • 将元素捕捉到自定义网格
  • 将拖动限制为垂直或水平轴
  • 保持纵横比
  • 启用触控功能
  • 使用自己的样式
  • 为句柄提供自己的样式

安装和基本用法

npm install --save vue-draggable-resizable

全局注册组件main.js中写入：

import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'

// 可选择导入默认样式
import ‘vue-draggable-resizable/dist/VueDraggableResizable.css’

Vue.component(‘vue-draggable-resizable’, VueDraggableResizable)

局部注册：在使用的组件里引用

import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

常用属性总结

:w 默认宽度
:h 默认高度
:x="50" 默认水平坐标 注意相对元素是谁
:y="50" 默认垂直最表 注意相对元素是谁
:min-width="50" 最小宽度
:min-height="50" 最小高度
:parent="true" 限制不能拖出父元素
parent=".p-event" 限制不能拖出class为p-event的元素
:grid 水平和垂直移动 每次分别能够走多少像素
class-name 自定义组件class 下面定义一个dragging1

常用事件总结

事件简述 文档（可点击直接进入）中ctrl+f 搜索 “事件” 查看详细事件参数 本demo举例的不一一阐述
@dragging="onDrag"  每当拖动组件时调用。
@resizing="onResize" 每当组件调整大小时调用。

本demo没用到的 可能会用到的
@dragstop=“onDragstop” 每当组件停止拖动时调用。
@resizestop=“onResizstop” 每当组件停止调整大小时调用
@deactivated=“onDeactivated” 每当用户单击组件外的任何位置时调用
@activated=“onActivated” 单击组件时调用，以显示句柄。备注：句柄就是点击组件后上下左右的可以拉伸的方块点

举例

vue模板代码

  <div class="helloword"><div class="text-event"><vue-draggable-resizable:w="150":h="150":x="50":y="50":min-width="50":min-height="50":parent="true":grid="[10,10]"class-name="dragging1"@dragging="onDrag"@resizing="onResize"><p>你好！ 我是一个灵活的组件。 你可以拖我四处，你可以调整我的大小。<br />X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p></vue-draggable-resizable></div>

<span style="color:#008000;">&lt;!--</span><span style="color:#008000;"> 相对于class等于什么的标记拖拽 注意指定 parent </span><span style="color:#008000;">--&gt;</span>
<span style="color:#0000ff;">&lt;</span><span style="color:#800000;">div </span><span style="color:#ff0000;">class</span><span style="color:#0000ff;">="p-event"</span><span style="color:#0000ff;">&gt;</span><span style="color:#0000ff;">&lt;</span><span style="color:#800000;">vue-draggable-resizable </span><span style="color:#ff0000;">parent</span><span style="color:#0000ff;">=".p-event"</span><span style="color:#0000ff;">&gt;</span><span style="color:#0000ff;">&lt;</span><span style="color:#800000;">p</span><span style="color:#0000ff;">&gt;</span>You can drag me around and resize me as you wish.<span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">p</span><span style="color:#0000ff;">&gt;</span><span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">vue-draggable-resizable</span><span style="color:#0000ff;">&gt;</span>
<span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">div</span><span style="color:#0000ff;">&gt;</span>

</div>

vue script代码

export default {name: "HelloWorld",data: function() {return {width: 0,height: 0,x: 0,y: 0};},methods: {onResize: function(x, y, width, height) {this.x = x;this.y = y;this.width = width;this.height = height;},onDrag: function(x, y) {this.x = x;this.y = y;}}
};

vue 层叠样式代码

.helloword {overflow: hidden;
}
.text-event {float: left;height: 500px;width: 500px;border: 1px solid red;position: relative;
/* 网格设置 */
background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 10px 10px, linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 10px 10px; 
}
.p-event {float: left;height: 300px;width: 300px;border: 1px solid blue;position: relative;margin-left: 20px;
}

.dragging1 {
border: 1px solid #000;
color: #000;
}

运行效果：都限制在自己设置的元素中不得超出

  • 网格设置 网格宽高为10像素，通过：  :grid属性控制每次拖拽移动多少像素  :grid:[10, 10]
  • 单击组件可显示 句柄 用来调整宽度高度
  • 拖拽移动组件可实时保存 水平 垂直 宽度 高度 的数据

注意：拖拽后背景变颜色是因为gif录制的原因

 

![在这里插入图片描述](https://img-blog.csdnimg.cn/dd2f05d1ce53438f9b130977f9c87270.png#pic_center)

相关文章：

vue实现可缩放拖拽盒子(亲测可用)

特征 没有依赖 使用可拖动&#xff0c;可调整大小或两者兼备定义用于调整大小的句柄限制大小和移动到父元素或自定义选择器将元素捕捉到自定义网格将拖动限制为垂直或水平轴保持纵横比启用触控功能使用自己的样式为句柄提供自己的样式 安装和基本用法 npm install --save vue-d…...

编程日记 2023/8/17 18:54:51

python一次性导出项目用到的依赖

导出依赖列表 如果你用到了Anaconda&#xff0c;记得先激活环境!!!! 下载pipreqs pip install pipreqs 在项目的根目录新建一个run_pipreqs.py文件&#xff0c;复制一下代码&#xff1a; # -*- coding: utf-8 -*- import os import subprocessos.environ["PYTHONIOE…...

编程日记 2023/8/17 18:53:50

移动端网页中的前端视频技术探索

引言 随着移动设备的普及和网络速度的提升&#xff0c;移动端网页中的视频播放已经成为了越来越重要的功能需求。本篇博客将介绍一些在移动端网页中实现前端视频播放的技术探索&#xff0c;并提供详细的代码示例。 1. 基本视频标签 在移动端网页中实现视频播放最基本的方法就…...

编程日记 2023/8/17 18:52:49

题解：ABC277C - Ladder Takahashi

题解&#xff1a;ABC277C - Ladder Takahashi 题目 链接&#xff1a;Atcoder。 链接&#xff1a;洛谷。 难度 算法难度&#xff1a;普及。 思维难度&#xff1a;入门。 调码难度&#xff1a;入门。 综合评价&#xff1a;简单。 算法 深度优先搜索简单图论 思路 把每…...

编程日记 2023/8/17 18:51:47

7.11 Java方法重写

7.11 Java方法重写 这里首先要确定的是重写跟属性没有关系&#xff0c;重写都是方法的重写&#xff0c;与属性无关 带有关键字Static修饰的方法的重写实例 父类实例 package com.baidu.www.oop.demo05;public class B {public static void test(){System.out.println("这…...

编程日记 2023/8/17 18:50:45

Android Stodio编译JNI项目，Cmake出错：Detecting C compiler ABI info - failed

在使用Android Stodio编译JNI项目时出现Cmake错误&#xff0c;报错如下&#xff1a; Execution failed for task :app:configureCMakeDebug[arm64-v8a]. > [CXX1429] error when building with cmake using C:\Users\Dell\AndroidStudioProjects\MyApplication2\app\src\ma…...

编程日记 2023/8/17 18:49:44

6.2 Spring Boot整合MyBatis

1、基于Spring BootMyBatis的学生信息系统的设计与实现案例 基于Spring BootMyBatis实现学生信息的新增、修改、删除、查询功能&#xff0c;并实现MySQL数据库的操作。 MySQL数据库创建学生表&#xff08;t_student&#xff09;&#xff0c;有主键、姓名、年龄、性别、出生日…...

编程日记 2023/8/17 18:48:42

在CentOS 7上使用kubeadm部署Kubernetes集群

如有错误&#xff0c;敬请谅解&#xff01; 此文章仅为本人学习笔记&#xff0c;仅供参考&#xff0c;如有冒犯&#xff0c;请联系作者删除&#xff01;&#xff01; 前言&#xff1a; Kubernetes是一个开源的容器编排平台&#xff0c;用于管理和自动化部署容器化的应用程序。…...

编程日记 2023/8/17 18:47:39

这6个免费设计素材网站，设计师都在用，马住

新手设计师不知道去哪里找素材&#xff0c;那就看看这几个设计师都在用的网站吧&#xff0c;免费、付费、商用素材都有&#xff0c;可根据需求选择&#xff0c;赶紧收藏~ 菜鸟图库 https://www.sucai999.com/?vNTYxMjky 菜鸟图库是一个非常大的素材库&#xff0c;站内包含设…...

编程日记 2023/8/17 18:46:38

uni-app引入sortable列表拖拽，兼容App和H5,拖拽排序。

效果: 拖拽排序 背景&#xff1a; 作为一名前端开发人员&#xff0c;在工作中难免会遇到拖拽功能&#xff0c;分享一个github上一个不错的拖拽js库&#xff0c;能满足我们在项目开发中的需要&#xff0c;下面是我在uniapp中使用SortableJS的使用详细流程&#xff1b; vue开发…...

编程日记 2023/8/17 18:44:33

Redis-内存淘汰算法

Redis可以存多少数据 32位的操作系统默认3G 谁现在用32位啊?我们说64位的 一般来讲是不设上限的 但是我们也可以主动配置maxmemory, maxmemory支持各单位: maxmemory 1024 (默认字节) maxmemory 1024KB maxmemory 1024MB maxmemory 1204GB 当Redis存储超过这个配置值&#…...

编程日记 2023/8/17 18:43:31

Git 合并分支时允许合并不相关的历史

git fetch git fetch 是 Git 的一个命令&#xff0c;用于从远程仓库中获取最新的提交和数据&#xff0c;同时更新本地仓库的远程分支指针。 使用 git fetch 命令可以获取远程仓库的最新提交&#xff0c;但并不会自动合并或修改本地分支。它会将远程仓库的提交和引用&#xff…...

编程日记 2023/8/17 18:42:30

世界上最著名的密码学夫妻的历史

Alice和Bob是密码学领域里最著名的虚拟夫妻&#xff0c;自1978年“诞生”以来&#xff0c;到走进二十一世纪的移动互联网时代&#xff0c;作为虚构的故事主角&#xff0c;Alice和Bob不仅在计算机理论、逻辑学、量子计算等与密码学相关的领域中得到应用&#xff0c;他们的名字也…...

编程日记 2023/8/17 18:41:28

二维码网络钓鱼攻击泛滥！美国著名能源企业成主要攻击目标

近日&#xff0c;Cofense发现了一次专门针对美国能源公司的网络钓鱼攻击活动&#xff0c;攻击者利用二维码将恶意电子邮件塞进收件箱并绕过安全系统。 Cofense 方面表示&#xff0c;这是首次发现网络钓鱼行为者如此大规模的使用二维码进行钓鱼攻击&#xff0c;这表明他们可能正…...

编程日记 2023/8/17 18:40:27

前端面试题-CSS

1. 盒模型 ⻚⾯渲染时&#xff0c; dom 元素所采⽤的 布局模型。可通过 box-sizing 进⾏设置。根据计算宽⾼的区域可分为 content-box ( W3C 标准盒模型)border-box ( IE 盒模型)padding-boxmargin-box (浏览器未实现) 2. BFC 块级格式化上下⽂&#xff0c;是⼀个独⽴的渲染…...

编程日记 2023/8/17 18:39:25

6.1 安全漏洞与网络攻击

数据参考&#xff1a;CISP官方 目录 安全漏洞及产生原因信息收集与分析网络攻击实施后门设置与痕迹清除 一、安全漏洞及产生原因 什么是安全漏洞 安全漏洞也称脆弱性&#xff0c;是计算机系统存在的缺陷 漏洞的形式 安全漏洞以不同形式存在漏洞数量逐年递增 漏洞产生的…...

编程日记 2023/8/17 18:38:24

STM32--EXTI外部中断

前文回顾---STM32--GPIO 相关回顾--有关中断系统简介 目录 STM32中断 NVIC EXTI外部中断 AFIO EXTI框图 旋转编码器简介 对射式红外传感器工程 代码&#xff1a; 旋转编码器工程 代码&#xff1a; STM32中断 先说一下基本原理&#xff1a; 1.中断请求发生&#xff1a…...

编程日记 2023/8/17 18:37:22

Python + Selenium 处理浏览器Cookie

工作中遇到这么一个场景&#xff1a;自动化测试登录的时候需要输入动态验证码&#xff0c;由于某些原因&#xff0c;需要从一个已登录的机器上&#xff0c;复制cookie过来&#xff0c;到自动化这边绕过登录。 浏览器的F12里复制出来的cookie内容是文本格式的&#xff1a; uui…...

编程日记 2023/8/17 18:36:20

文件的导入与导出

文章目录 一、需求二、分析1. Excel 表格数据导出2. Excel 表格数据导入一、需求 在我们日常开发中，会有文件的导入导出的需求，如何在 vue 项目中写导入导出功能呢 二、分析 以 Excel 表格数据导出为例 1. Excel 表格数据导出 调用接口将返回的数据进行 Blob 转换，附： 接…...

编程日记 2023/8/17 18:35:18

[C++] string类的介绍与构造的模拟实现，进来看吧，里面有空调

文章目录 1、string类的出现1.1 C语言中的字符串 2、标准库中的string类2.1 string类 3、string类的常见接口说明及模拟实现3.1 string的常见构造3.2 string的构造函数3.3 string的拷贝构造3.4 string的赋值构造 4、完整代码 1、string类的出现 1.1 C语言中的字符串 C语言中&…...

编程日记 2023/8/17 18:34:17

【Apollo】赋能移动性：阿波罗自动驾驶系统的影响

前言 Apollo (阿波罗)是一个开放的、完整的、安全的平台&#xff0c;将帮助汽车行业及自动驾驶领域的合作伙伴结合车辆和硬件系统&#xff0c;快速搭建一套属于自己的自动驾驶系统。 开放能力、共享资源、加速创新、持续共赢是 Apollo 开放平台的口号。百度把自己所拥有的强大、…...

编程日记 2023/8/17 18:33:16

Camunda 7.x 系列【19】表达式语言

有道无术，术尚可求，有术无道，止于术。 本系列Spring Boot 版本 2.7.9 本系列Camunda 版本 7.19.0 源码地址：https://gitee.com/pearl-organization/camunda-study-demo 文章目录 1. 概述2. 变量与函数2.1 流程变量2.2 内置环境变量2.3 Spring、CDI Bean2.4 内置上下文函数…...

编程日记 2023/8/17 18:32:14

详解RFC 793文档-4

3.7 数据通信 一旦连接建立，数据就通过交换数据段进行通信。由于错误（校验和错误）或网络拥塞可能导致数据段丢失，TCP使用重传（超时后）来确保每个段的交付。由于网络或TCP重传，可能会到达重复的段。对于重复段，TCP对段中的SEQ和ACK号执行某些检测，以验证它们的可接受性…...

编程日记 2023/8/17 18:31:13

ubuntu16编译内核源码并替换

文章目录 1.找到和ubuntu内核版本相同的内核源码包2.下载下面三个文件3.相关步骤4.安装编译环境软件参考&#xff1a; 1.找到和ubuntu内核版本相同的内核源码包 4.15.0-112.113 : linux package : Ubuntu (launchpad.net) 2.下载下面三个文件 3.相关步骤 uname -r #查看内核…...

编程日记 2023/8/17 18:30:12

AI 绘画Stable Diffusion 研究（九）sd图生图功能详解-老照片高清修复放大

大家好&#xff0c;我是风雨无阻。 通过前面几篇文章的介绍&#xff0c;相信各位小伙伴&#xff0c;对 Stable Diffusion 这款强大的AI 绘图系统有了全新的认知。我们见识到了借助 Stable Diffusion的文生图功能&#xff0c;利用简单的几个单词&#xff0c;就可以生成完美的图片…...

编程日记 2023/8/17 18:29:11

Linux系统安装Google Chrome

1.进入谷歌浏览器官网 Google Chrome - Download the Fast, Secure Browser from GoogleGet more done with the new Google Chrome. A more simple, secure, and faster web browser than ever, with Google’s smarts built-in. Download now.http://www.google.cn/intl/en_…...

编程日记 2023/8/17 18:28:09

带你了解SpringBoot支持的复杂参数--自定义对象参数-自动封装

&#x1f600;前言 本篇博文是关于SpringBoot 在响应客户端请求时支持的复杂参数和自定义对象参数&#xff0c;希望您能够喜欢&#x1f60a; &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章…...

编程日记 2023/8/17 18:27:06

Raspberry Pi Pico RP2040制作低成本FPGA JTAG工具

目录 1 准备工作和前提条件 1.1 Raspberry Pi Pico RP2040板子一个 1.2 xvcPico.uf2固件 1.3 Vivado USB驱动 2 操作指南 2.1 按住Raspberry Pi Pico开发板的BOOTSEL按键&#xff0c;再接上USB接口到电脑 2.2 刷入固件 2.3 Vivado USB 驱动 2.3.1 打开Zadig驱动工具 2.3…...

编程日记 2023/8/17 18:26:04

【工具】Python从临时邮箱获取验证码

安装好依赖库之后代码可直接运行&#xff0c; captcha re.search(r您的验证码为: \*(\w)\*, response.json()[body][html])正则表达式部分改成自己的。 import random import requests import re from faker import Fakerdomain "https://api.mail.cx/api/v1" # 临…...

编程日记 2023/8/17 18:25:01

时序预测 | MATLAB实现基于GRU门控循环单元的时间序列预测-递归预测未来(多指标评价)

时序预测 | MATLAB实现基于GRU门控循环单元的时间序列预测-递归预测未来(多指标评价) 目录 时序预测 | MATLAB实现基于GRU门控循环单元的时间序列预测-递归预测未来(多指标评价)预测结果基本介绍程序设计参考资料 预测结果 基本介绍 1.Matlab实现GRU门控循环单元时间序列预测未…...

编程日记 2023/8/17 18:23:58