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

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

news 2026/2/10 20:16:59

特征

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

安装和基本用法

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

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2026/1/31 15:09:31

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/11/25 4:59:47

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2026/2/6 0:50:24

（一）单例模式

一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

编程新知 2026/1/30 6:03:31

怎么让Comfyui导出的图像不包含工作流信息，

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

编程新知 2025/8/13 15:12:54

AxureRP-Pro-Beta-Setup_114413.exe （6.0.0.2887）

Name&#xff1a;3ddown Serial&#xff1a;FiCGEezgdGoYILo8U/2MFyCWj0jZoJc/sziRRj2/ENvtEq7w1RH97k5MWctqVHA 注册用户名&#xff1a;Axure 序列号&#xff1a;8t3Yk/zu4cX601/seX6wBZgYRVj/lkC2PICCdO4sFKCCLx8mcCnccoylVb40lP...

编程新知 2026/2/4 19:42:20

Java 与 MySQL 性能优化：MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...

编程新知 2026/1/23 0:14:48

【大模型】RankRAG：基于大模型的上下文排序与检索增强生成的统一框架

文章目录 A 论文出处B 背景B.1 背景介绍B.2 问题提出B.3 创新点 C 模型结构C.1 指令微调阶段C.2 排名与生成的总和指令微调阶段C.3 RankRAG推理&#xff1a;检索-重排-生成 D 实验设计E 个人总结 A 论文出处 论文题目&#xff1a;RankRAG&#xff1a;Unifying Context Ranking…...

编程新知 2026/2/5 1:38:59

大数据驱动企业决策智能化的路径与实践

&#x1f4dd;个人主页&#x1f339;&#xff1a;慌ZHANG-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 一、引言&#xff1a;数据驱动的企业竞争力重构 在这个瞬息万变的商业时代&#xff0c;“快者胜”的竞争逻辑愈发明显。企业如何在复杂环…...

编程新知 2025/10/5 0:43:53

【R语言编程——数据调用】

这里写自定义目录标题 可用库及数据集外部数据导入方法查看数据集信息 在R语言中&#xff0c;有多个库支持调用内置数据集或外部数据&#xff0c;包括studentdata等教学或示例数据集。以下是常见的库和方法&#xff1a; 可用库及数据集 openintro库 该库包含多个教学数据集&a…...

编程新知 2025/10/22 14:32:24