基于vue-grid-layout插件(vue版本)实现增删改查/拖拽自动排序等功能(已验证、可正常运行)
前端时间有个需求,需要对3×3(不一定,也可能多行)的卡片布局,进行拖拽,拖拽过程中自动排序,以下代码是基于vue2,可直接运行,报错可评论滴我
部分代码优化来自于GPT4o和Claude:官方直连GPT/Claude
代码如下:
<template><div style="width: 600px; height: 2000px;margin-top:20px"><hr /><br /><button @click="addItem">添加元素</button><div class="container" style="width: 100%; margin-top: 10px; height: 100%"><grid-layout:layout="layout":col-num="colNum":row-height="30":vertical-compact="false":use-css-transforms="true"@layout-updated="layoutUpdatedEvent" ><grid-itemv-for="item in layout":key="item.i":x="item.x":y="item.y":w="item.w":h="item.h":i="item.i"><span class="text">{{ item.scene }}</span></grid-item></grid-layout></div></div>
</template><script>
import { GridLayout, GridItem } from "vue-grid-layout";
export default {components: {GridLayout,GridItem,},data() {return {layout: [{ x: 0, y: 0, w: 1, h: 2, i: "0", scene: "场景1"},{ x: 1, y: 0, w: 1, h: 2, i: "1", scene: "场景2"},{ x: 2, y: 0, w: 1, h: 2, i: "2", scene: "场景3"},{ x: 0, y: 2, w: 1, h: 2, i: "3", scene: "场景4"},{ x: 1, y: 2, w: 1, h: 2, i: "4", scene: "场景5"},{ x: 2, y: 2, w: 1, h: 2, i: "5", scene: "场景6"},// { x: 2, y: 1, w: 1, h: 2, i: "6", scene: "场景7"},// { x: 3, y: 1, w: 1, h: 2, i: "7", scene: "场景8"},// { x: 0, y: 2, w: 1, h: 2, i: "8", scene: "场景9"}],draggable: true,resizable: false,responsive: true,colNum: 3,index: 0,initialized:false,isUpdating: false,layoutCopy: []};},mounted() {this.index = this.layout.length;},methods: {layoutUpdatedEvent(newLayout) {if (!this.isUpdating) {this.isUpdating = true;this.rearrangeLayout(newLayout);this.$nextTick(() => {this.isUpdating = false;});}},rearrangeLayout(layout) {// 创建 layout 的深拷贝,防止修改原始数据let newLayout = layout;// 按 y 和 x 排序newLayout.sort((a, b) => a.y - b.y || a.x - b.x);// 重新排列布局for (let i = 0; i < newLayout.length; i++) {newLayout[i].x = (i % 3) * 1;newLayout[i].y = Math.floor(i / 3)*newLayout[i].h;}this.layout= newLayout;},addItem(){// Add a new item. It must have a unique key!this.layout.push({x: (this.layout.length * 1) % (this.colNum || 12),// q:为什么* 2 a:因为每个元素的宽度是2y: this.layout.length + (this.colNum || 12), // puts it at the bottomw: 1,h: 2,i: this.index,scene: `场景${this.layout.length + 1}`});console.log(this.layout,"this.layout");// Increment the counter to ensure key is always unique.this.index++;},removeItem(){const index = this.layout.map(item => item.i).indexOf(val);this.layout.splice(index, 1);},}
};
</script><style>
.container .vue-grid-item.vue-grid-placeholder {background: none;border: #00893d dashed 2px;
}
.vue-grid-layout {background: #eee;
}
.vue-grid-item:not(.vue-grid-placeholder) {background: #00893d;border: 1px solid #00893d;
}
.vue-grid-item .resizing {opacity: 0.9;
}
.vue-grid-item .static {background: #cce;
}
.vue-grid-item .text {font-size: 24px;text-align: center;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;height: 100%;width: 100%;color: #FFF;
}
.vue-grid-item .no-drag {height: 100%;width: 100%;
}
.vue-grid-item .minMax {font-size: 12px;
}
.vue-grid-item .add {cursor: pointer;
}
.vue-draggable-handle {position: absolute;width: 20px;height: 20px;top: 0;left: 0;background-position: bottom right;padding: 0 8px 8px 0;background-repeat: no-repeat;background-origin: content-box;box-sizing: border-box;cursor: pointer;
}
.layoutJSON {background: #ddd;border: 1px solid #00893d;margin-top: 10px;padding: 10px;
}
.columns {-moz-columns: 120px;-webkit-columns: 120px;columns: 120px;
}
</style>
相关文章:

基于vue-grid-layout插件(vue版本)实现增删改查/拖拽自动排序等功能(已验证、可正常运行)
前端时间有个需求,需要对33(不一定,也可能多行)的卡片布局,进行拖拽,拖拽过程中自动排序,以下代码是基于vue2,可直接运行,报错可评论滴我 部分代码优化来自于GPT4o和Clau…...
DBoW3相关优化脉络
1 DBow3 GitHub - rmsalinas/DBow3: Improved version of DBow2 2 优化后得到fbow GitHub - rmsalinas/fbow: FBOW (Fast Bag of Words) is an extremmely optimized version of the DBow2/DBow3 libraries. 其中fbow是ucoslam的一部分; ucoslam GitHub - la…...

qt 如何制作动态库插件
首先 首先第一点要确定我们的接口是固定的,也就是要确定 #ifndef RTSPPLUGIN_H #define RTSPPLUGIN_H #include "rtspplugin_global.h" typedef void (*func_callback)(uint8_t* data,int len,uint32_t ssrc,uint32_t ts,const char* ipfrom,uint16_t f…...
一种docker start放回Error response from daemon: task xxx错误的解决方式
1. 问题描述 执行systemctl daemon-reload与systemctl restart docker命令后,发现docker中有的应用无法启动,并显示出Exit(255)的错误提示。 重新执行docker start 容器id后发现返回,Error response from daemon: task xxx的错误。 2. 问题…...
规控面试常见问题
一、项目中遇到的困难或者挑战是什么? 二、A*算法原理(伪代码) 输入:代价地图、start 、 goal(Node结构,包含x、y、g、h、id、pid信息) 首先初始化:创建一个优先级队列openlist,它是一个最小堆,根据节点的f值排序 ( priority_queue<Node, std::vector<Node…...

代码随想录算法训练营Day 63| 图论 part03 | 417.太平洋大西洋水流问题、827.最大人工岛、127. 单词接龙
代码随想录算法训练营Day 63| 图论 part03 | 417.太平洋大西洋水流问题、827.最大人工岛、127. 单词接龙 文章目录 代码随想录算法训练营Day 63| 图论 part03 | 417.太平洋大西洋水流问题、827.最大人工岛、127. 单词接龙17.太平洋大西洋水流问题一、DFS二、BFS三、本题总结 82…...
【全网最全】CSDN博客的文字颜色、字体和字号设置
文章目录 一、字体颜色二、字体大小三、字体类型四、字体背景色 在这篇博客中,我们将深入探讨如何在Markdown编辑器中设置文字颜色、大小、字体与背景色。Markdown本身并不直接支持这些功能,但通过结合HTML标签和CSS样式,我们可以实现这些视觉…...
C#实现数据采集系统-Mqtt实现采集数据转发
在数据采集系统中,通过ModbusTcp采集到数据之后,再通过MQTT转发到其他应用 MQTT操作 安装MQTT mqtt介绍和环境安装 使用MQTT 在C#/Net中使用Mqtt MQTT类封装 MQTT配置类 public class MqttConfig{public string Ip {get; set;...

common-intellisense:助力TinyVue 组件书写体验更丝滑
本文由体验技术团队Kagol原创~ 前两天,common-intellisense 开源项目的作者 Simon-He95 在 VueConf 2024 群里发了一个重磅消息: common-intellisense 支持 TinyVue 组件库啦! common-intellisense 插件能够提供超级强大的智能提示功能&…...

图片在线压缩有效方法详解,分享7款最佳图片压缩工具免费(全新)
当您的系统中图片数量不断增加,却无法删除时,那么就需要通过图片压缩来解决您的问题。随着图片文件的增大,高分辨率图片占据了大量存储空间。而此时系统中的存储空间也开始变得不够用,无法跟上高质量图片的增长。因此,…...

electron安装及快速创建
electron安装及快速创建 electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 详细内容见官网:https://www.electronjs.org/zh/docs/latest/。 今天来记录下练习中的安装过程和hello world的创建。 创建项目文件夹,并执行npm 初始化命…...
需要消化的知识点
需要消化 消灭清单 如何自定义一个Interceptor拦截器? 后端开发可以用上的前端技巧 10个堪称神器的 Java 学习网站. 【前端胖头鱼】11 chrome高级调试技巧,学会效率直接提升666% 【前端胖头鱼】10个我经常逛的“小网站” 【前端劝退师lv-6】Chrome D…...

2024年7月25日(Git gitlab以及分支管理 )
分布式版本控制系统 一、Git概述 Git 是一种分布式版本控制系统,用于跟踪和管理代码的变更。它是由Linus Torvalds创建的,最 初被设计用于Linux内核的开发。Git允许开发人员跟踪和管理代码的版本,并且可以在不同的开 发人员之间进行协作。 Github 用的就是Git系统来管理它们的…...

pdf格式过大怎么样变小 pdf文件过大如何缩小上传 超实用的简单方法
面对体积庞大的 PDF 文件,我们常常需要寻找有效的方法来缩减其大小。这不仅能够优化存储空间,还能提升文件的传输和打开速度。PDF文件以其稳定性和跨平台兼容性成为工作和学习中的重要文件格式。然而,当我们需要通过邮件发送或上传大文件时&a…...

前端文件下载word乱码问题
记录一次word下载乱码问题: 用的请求是axios库,然后用Blob去接收二进制文件 思路:现在的解决办法有以下几种,看看是对应哪种,可以尝试解决 1.将响应类型设为blob,这也是最重要的,如果没有解决…...

repo中的default.xml文件project name为什么一样?
文章目录 default.xml文件介绍为什么 name 是一样的,path 不一样?总结 default.xml文件介绍 在 repo 工具的 default.xml 文件中,定义了多个 project 元素,每个元素都代表一个 Git 仓库。 XML 定义了多个不同的 project 元素&…...
<section id=“nice“ data-tool=“mdnice编辑器“ data-webs
大模型日报 2024-07-24 大模型资讯 Meta发布最大Llama 3 AI模型,语言和数学能力提升 摘要: Meta公司发布了其迄今为止最大的Llama 3人工智能模型。该模型主要免费提供,具备多语言处理能力,并在语言和数学方面表现出显著提升。 Meta发布最强AI…...
作业7.26~28
全双工: 通信双方 既可以发送,也可以接收数据 1. 利用多线程 或者 多进程, 实现TCP服务器 和 客户端的全双工通信 思路: 服务器和客户端, 在建立通信以后,可以创建线程,在线程编写另一个功能代…...

自定义webIpad证件相机(webRTC)
该技术方案可用于各浏览器自定义相机开发 相机UI(index.html) <!DOCTYPE html> <html lang"zh" prew"-1"><head><meta charset"UTF-8"><meta name"viewport"content"user-sc…...
GO发票真伪批量查验方法、数电票查验接口
“教”给机器标注数据的正确率就决定了人工智能判断的正确率。翔云人工智能开放平台的OCR产品经过我们的开发人员精心调“教”,识别率高、识别速度快。 发票,是发生的成本、费用或收入的原始凭证。于公司来说,发票主要是公司做账的依据&…...
内存分配函数malloc kmalloc vmalloc
内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)
HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...
深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出:JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中,随机数的生成看似简单,却隐藏着许多玄机。无论是生成密码、加密密钥,还是创建安全令牌,随机数的质量直接关系到系统的安全性。Jav…...

DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增:通道注意力模块(SE模块) class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

YSYX学习记录(八)
C语言,练习0: 先创建一个文件夹,我用的是物理机: 安装build-essential 练习1: 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件,随机修改或删除一部分,之后…...
Matlab | matlab常用命令总结
常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...
使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...
Java数值运算常见陷阱与规避方法
整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...
怎么让Comfyui导出的图像不包含工作流信息,
为了数据安全,让Comfyui导出的图像不包含工作流信息,导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo(推荐) 在 save_images 方法中,删除或注释掉所有与 metadata …...

脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)
一、OpenBCI_GUI 项目概述 (一)项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台,其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言,首次接触 OpenBCI 设备时,往…...