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;"><!--</span><span style="color:#008000;"> 相对于class等于什么的标记拖拽 注意指定 parent </span><span style="color:#008000;">--></span>
<span style="color:#0000ff;"><</span><span style="color:#800000;">div </span><span style="color:#ff0000;">class</span><span style="color:#0000ff;">="p-event"</span><span style="color:#0000ff;">></span><span style="color:#0000ff;"><</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;">></span><span style="color:#0000ff;"><</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span>You can drag me around and resize me as you wish.<span style="color:#0000ff;"></</span><span style="color:#800000;">p</span><span style="color:#0000ff;">></span><span style="color:#0000ff;"></</span><span style="color:#800000;">vue-draggable-resizable</span><span style="color:#0000ff;">></span>
<span style="color:#0000ff;"></</span><span style="color:#800000;">div</span><span style="color:#0000ff;">></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; }
.p-event {float: left;height: 300px;width: 300px;border: 1px solid blue;position: relative;margin-left: 20px;
}
.dragging1 {
border: 1px solid #000;
color: #000;
}
运行效果：都限制在自己设置的元素中不得超出
注意：拖拽后背景变颜色是因为gif录制的原因
特征 没有依赖 使用可拖动，可调整大小或两者兼备定义用于调整大小的句柄限制大小和移动到父元素或自定义选择器将元素捕捉到自定义网格将拖动限制为垂直或水平轴保持纵横比启用触控功能使用自己的样式为句柄提供自己的样式 安装和基本用法 npm install --save vue-d…...
导出依赖列表 如果你用到了Anaconda，记得先激活环境!!!! 下载pipreqs pip install pipreqs 在项目的根目录新建一个run_pipreqs.py文件，复制一下代码： # -*- coding: utf-8 -*- import os import subprocessos.environ["PYTHONIOE…...
引言 随着移动设备的普及和网络速度的提升，移动端网页中的视频播放已经成为了越来越重要的功能需求。本篇博客将介绍一些在移动端网页中实现前端视频播放的技术探索，并提供详细的代码示例。 1. 基本视频标签 在移动端网页中实现视频播放最基本的方法就…...
题解：ABC277C - Ladder Takahashi 题目 链接：Atcoder。 链接：洛谷。 难度 算法难度：普及。 思维难度：入门。 调码难度：入门。 综合评价：简单。 算法 深度优先搜索简单图论 思路 把每…...
7.11 Java方法重写 这里首先要确定的是重写跟属性没有关系，重写都是方法的重写，与属性无关 带有关键字Static修饰的方法的重写实例 父类实例 package com.baidu.www.oop.demo05;public class B {public static void test(){System.out.println("这…...
在使用Android Stodio编译JNI项目时出现Cmake错误，报错如下： Execution failed for task :app:configureCMakeDebug[arm64-v8a]. > [CXX1429] error when building with cmake using C:\Users\Dell\AndroidStudioProjects\MyApplication2\app\src\ma…...
1、基于Spring BootMyBatis的学生信息系统的设计与实现案例 基于Spring BootMyBatis实现学生信息的新增、修改、删除、查询功能，并实现MySQL数据库的操作。 MySQL数据库创建学生表（t_student），有主键、姓名、年龄、性别、出生日…...
如有错误，敬请谅解！ 此文章仅为本人学习笔记，仅供参考，如有冒犯，请联系作者删除！！ 前言： Kubernetes是一个开源的容器编排平台，用于管理和自动化部署容器化的应用程序。…...
新手设计师不知道去哪里找素材，那就看看这几个设计师都在用的网站吧，免费、付费、商用素材都有，可根据需求选择，赶紧收藏~ 菜鸟图库 https://www.sucai999.com/?vNTYxMjky 菜鸟图库是一个非常大的素材库，站内包含设…...
效果: 拖拽排序 背景： 作为一名前端开发人员，在工作中难免会遇到拖拽功能，分享一个github上一个不错的拖拽js库，能满足我们在项目开发中的需要，下面是我在uniapp中使用SortableJS的使用详细流程； vue开发…...
Redis可以存多少数据 32位的操作系统默认3G 谁现在用32位啊?我们说64位的 一般来讲是不设上限的 但是我们也可以主动配置maxmemory, maxmemory支持各单位: maxmemory 1024 (默认字节) maxmemory 1024KB maxmemory 1024MB maxmemory 1204GB 当Redis存储超过这个配置值&#…...
git fetch git fetch 是 Git 的一个命令，用于从远程仓库中获取最新的提交和数据，同时更新本地仓库的远程分支指针。 使用 git fetch 命令可以获取远程仓库的最新提交，但并不会自动合并或修改本地分支。它会将远程仓库的提交和引用ÿ…...
Alice和Bob是密码学领域里最著名的虚拟夫妻，自1978年“诞生”以来，到走进二十一世纪的移动互联网时代，作为虚构的故事主角，Alice和Bob不仅在计算机理论、逻辑学、量子计算等与密码学相关的领域中得到应用，他们的名字也…...
近日，Cofense发现了一次专门针对美国能源公司的网络钓鱼攻击活动，攻击者利用二维码将恶意电子邮件塞进收件箱并绕过安全系统。 Cofense 方面表示，这是首次发现网络钓鱼行为者如此大规模的使用二维码进行钓鱼攻击，这表明他们可能正…...
1. 盒模型 ⻚⾯渲染时， dom 元素所采⽤的 布局模型。可通过 box-sizing 进⾏设置。根据计算宽⾼的区域可分为 content-box ( W3C 标准盒模型)border-box ( IE 盒模型)padding-boxmargin-box (浏览器未实现) 2. BFC 块级格式化上下⽂，是⼀个独⽴的渲染…...
数据参考：CISP官方 目录 安全漏洞及产生原因信息收集与分析网络攻击实施后门设置与痕迹清除 一、安全漏洞及产生原因 什么是安全漏洞 安全漏洞也称脆弱性，是计算机系统存在的缺陷 漏洞的形式 安全漏洞以不同形式存在漏洞数量逐年递增 漏洞产生的…...
前文回顾---STM32--GPIO 相关回顾--有关中断系统简介 目录 STM32中断 NVIC EXTI外部中断 AFIO EXTI框图 旋转编码器简介 对射式红外传感器工程 代码： 旋转编码器工程 代码： STM32中断 先说一下基本原理： 1.中断请求发生：…...
工作中遇到这么一个场景：自动化测试登录的时候需要输入动态验证码，由于某些原因，需要从一个已登录的机器上，复制cookie过来，到自动化这边绕过登录。 浏览器的F12里复制出来的cookie内容是文本格式的： uui…...
文章目录 一、需求二、分析1. Excel 表格数据导出2. Excel 表格数据导入一、需求 在我们日常开发中，会有文件的导入导出的需求，如何在 vue 项目中写导入导出功能呢 二、分析 以 Excel 表格数据导出为例 1. Excel 表格数据导出 调用接口将返回的数据进行 Blob 转换，附： 接…...
文章目录 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语言中&…...
阿里千问，有个海外版。我也是最近才知道，用了一下，发现审核尺度明显要宽松很多，国内的千问明显被约束很多，就是个半残品。据说啊，国际版千问的部分数据放在了新加坡，对标的是ChatGPT。好像现在阿…...
导读： 2026年，职场竞争的底层逻辑已悄然改变。当传统运营还在为写一段文案、剪一个视频熬夜时，掌握了 AI 智能体技术的“新运营人”已经通过自动化工作流，实现了 10 倍速的产出。目前，市场对AI智能体运营经理、AI内容策…...
以下是一个共享图书借阅系统的Java源码与数据库设计的完整方案，涵盖系统架构、核心功能实现、数据库设计以及安全防护措施等方面：一、系统架构技术栈：后端：Spring Boot 2.x MyBatis-Plus（简化数据库操作）前…...
1. 红外小目标检测的技术挑战 红外遥感图像中的小目标检测一直是计算机视觉领域的难点问题。与可见光图像相比，红外图像具有低对比度、高噪声、目标尺寸小等特点，这使得传统检测算法难以取得理想效果。在实际应用中，军事侦察中的无人机识别、…...
“30岁，人生好像走到了岔路口，转行还来得及吗？”这是很多职场人遭遇瓶颈时，都会反复纠结的问题。尤其是面对AI大模型这样的新兴领域，不少人既心动又胆怯——怕年龄太大、怕没有基础、怕跟不上节奏。但今天我想明确告诉…...
1. CAN总线信号本质解析CAN总线采用数字信号传输机制，这是由其底层电气特性和协议设计决定的。在物理层上，CAN总线使用差分电压信号（CAN_H和CAN_L）表示逻辑状态：当CAN_H电压高于CAN_L约1.5V时表示显性位（逻…...
Fish Speech-1.5镜像资源管理：模型热更新与多版本共存部署方案 1. 引言：语音合成的新选择 想象一下，你需要为产品演示视频添加多语言配音，或者为在线课程制作不同语言的语音内容。传统方法要么成本高昂，要么效果生硬…...
1. 嵌入式开发中的五大常见Bug根源解析在嵌入式系统开发领域，代码质量直接关系到产品的可靠性和稳定性。作为一名经历过多个嵌入式项目的开发者，我深刻体会到某些类型的bug特别顽固且难以排查。这些bug往往在实验室测试中难以复现，却在现场运…...
共享店铺模式是一种将线下实体店铺资源通过数字化手段进行整合与共享的商业模式，小程序作为轻量级应用非常适合实现这一目标。以下是开发共享店铺模式小程序的关键要点：核心功能模块设计用户端功能需包含注册登录、店铺浏览、预约下单、支付系统、评价反…...
1. 项目概述ESP8266Scheduler 是一个专为 ESP8266 平台设计的协作式多任务调度器（Co-operative Multitasking Scheduler），其核心目标是在资源受限的 Wi-Fi SoC 上实现轻量、确定、可预测的任务并发执行模型，同时避免传统抢占式 RT…...