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语言中&…...
AzurLaneAutoScript：碧蓝航线玩家的终极自动刷图解决方案 【免费下载链接】AzurLaneAutoScript Azur Lane bot (CN/EN/JP/TW) 碧蓝航线脚本 | 无缝委托科研，全自动大世界 项目地址: https://gitcode.com/gh_mirrors/az/AzurLaneAutoScript 还在为…...
1. 项目概述：一个为AI应用注入数据库灵魂的MCP服务器如果你正在开发基于大语言模型（LLM）的AI应用，比如一个智能客服、一个文档分析助手，或者一个能帮你从海量数据中提炼洞察的智能体，你可能会遇到一个核心痛…...
1. Real-is-Sim框架概述：动态数字孪生的创新实践在机器人控制领域，仿真到现实的迁移（sim-to-real）一直是个棘手难题。传统方法往往面临"仿真太完美，现实太复杂"的困境——在虚拟环境中训练的策略，…...
1. 项目概述：从“刷”到“懂”，快手推荐算法的冰山一角 刷快手，可能是很多人每天的习惯性动作。手指一划，一个接一个的短视频，好像总能精准地戳中你的笑点、泪点或是知识盲区。你有没有想过，为什么你看到的…...
C语言学习路线与开发环境搭建 一、本篇文章要解决什么问题 你可能是第一次接触编程，或者从其他语言转过来想学 C 语言。不管哪种情况，摆在面前的第一个问题都是：从哪开始？ 这篇文章就帮你解决三个最实际的问题： C 语言…...
目录 手把手教你学Simulink--电动物流车预充电路控制及主继电器粘连检测电机负载仿真 摘要 Abstract 1. 引言 1.1 电动物流车发展背景 1.2 研究目的与意义 1.3 研究方法与内容 2. 文献综述 2.1 电动物流车预充电路研究现状 2.2 主继电器粘连检测技术进展 2.3 Simulin…...
Hive 3.1.2 实战避坑：从Metastore初始化到分区表优化的全链路解决方案 当你在Ubuntu 18.04上刚完成Hive 3.1.2的安装，满心欢喜准备大展拳脚时，命令行却无情地抛出"Hive metastore database is not initialized"的错误提示——这场景…...
很多文档解析 Demo 看起来都很惊艳：上传一张图片，模型识别出文字、表格、公式，甚至还能输出 Markdown。但真正进入生产环境后，问题很快就会暴露出来。企业里的文档不是干净样例，而是 PDF、扫描件、合同、票据、财报、检…...
如何在PC上免费畅玩Switch游戏：yuzu模拟器终极指南 【免费下载链接】yuzu 任天堂 Switch 模拟器 项目地址: https://gitcode.com/GitHub_Trending/yu/yuzu 想要在电脑上体验任天堂Switch游戏吗？yuzu模拟器是你的完美选择！作为目前最受…...
1. 项目概述：ClawX，一个面向开发者的智能代码助手最近在GitHub上看到一个挺有意思的项目，叫ClawX。乍一看这个名字，可能会联想到“爪子”或者“抓取”，但它的定位其实是一个AI驱动的代码助手。作为一个在开发一线摸爬滚…...