基于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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/51225.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

78.WEB渗透测试-信息收集-框架组件识别利用(2)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;77.WEB渗透测试-信息收集-框架组件识别利用&#xff08;1&#xff09; shiro&#xff1a;…

Ubuntu18.04 编译报错: Could NOT find JNI

一、问题描述 Ubuntu18.04 编译报错 OpenCV 时&#xff0c;出现以下错误&#xff1a; Could NOT find JNI (missing: JAVA_INCLUDE_PATH JAVA_INCLUDE_PATH2 JAVA_AWT_INCLUDE_PATH)二、解决方法 先执行以下指令&#xff0c; export JAVA_HOME/usr/lib/jvm/java-8-openjdk-am…

Postman中的高级技巧:实现请求的依赖注入

Postman中的高级技巧&#xff1a;实现请求的依赖注入 在API测试中&#xff0c;依赖注入是一种常见的技术&#xff0c;它允许测试人员在执行请求之前动态地设置参数。Postman作为一个强大的API开发和测试工具&#xff0c;提供了多种方法来实现请求的依赖注入。本文将详细介绍如…

支持向量机 及其分类案例详解(附Python 代码)

支持向量机分类器预测收入等级 我们将构建一个支持向量机&#xff08;SVM&#xff09;分类器&#xff0c;以预测一个人基于14个属性的收入等级。我们的目标是判断收入是否高于或低于每年$50,000。因此&#xff0c;这是一个二元分类问题。我们将使用在此处可用的人口普查收入数…

JDBC基础

目录 一、JDBC概述 二、JDBC搭建 1.注册JDBC驱动程序 2.建立与数据库连接 3.获得Satement执行sql语句 4.关闭与数据库的链接通道 三、PreparedStatement和Statement 1、代码的可读性和可维护性 2、最重要的一点是极大地提高了安全性 四、结果集处理 一、JDBC概述 JD…

0719_驱动1 arm裸机开发与linux驱动开发区别

一、什么是驱动 1.只要有硬件存在的地方&#xff0c;就会有驱动存在 2.在windows操作系统中&#xff0c;usb驱动&#xff0c;网卡驱动&#xff0c;电源驱动...... 3.在linux操作系统中&#xff0c;电源驱动&#xff0c;网卡驱动&#xff0c;内存驱动&#xff0c;EMMC驱动..... …

c语言指针2

文章目录 一、void * 指针二、const关键字1.const修饰变量2.const修饰指针变量2. 1 const放在*的右边2. 2 const放在*的左边2. 3 总结 三、指针的运算3. 1指针的加减运算3. 2 指针 - 指针3. 3 指针的关系运算 四、野指针4. 1 什么叫野指针&#xff1f;4. 1 野指针的成因4.1.1 指…

Poetry入门教程

以前使用模块管理和虚拟环境为pip和Virtualenv组合&#xff0c;随着Rasa、Dify等开源项目逐步使用Poetry模块管理&#xff0c;也开始尝试使用Poetry。本文简要介绍Poetry入门操作。 1.Poetry安装 可参考Poetry官网[1]推荐的安装方式&#xff1a; 通过Windows的Powershell如下…

C++编程: 使用 Nanomsg 进行 PUB-SUB 模式基准测试

文章目录 0. 引言1. Nanomsg简介1.1 可扩展性协议类型1.2 支持的传输机制1.3 NanoMsg 架构与实现 2. PUB-SUB 模式基准测试 0. 引言 Nanomsg 作为一款高性能的通信库&#xff0c;支持多种消息传递模式&#xff0c;其中包括 PUB-SUB&#xff08;发布-订阅&#xff09;。 本篇文…

yolov8环境安装

一、Miniconda Conda 是一个开源的包管理和环境管理系统&#xff0c;它能运行、安装和更新各种包和依赖&#xff0c;同时还能创建隔离的环境。 1.1 下载安装 Miniconda https://repo.anaconda.com/miniconda/Miniconda3-py39_24.5.0-0-Windows-x86_64.exe1.2 打开 Anaconda …

向量数据库(一)

写在前面 最近在学习一些 AI 相关的开发&#xff0c;了解了一些未接触过的东西&#xff0c;其中有一部分是向量数据库&#xff0c;想开一个专题&#xff0c;对相关的内容做一下整理。 内容 什么是向量数据库 一般在我们的日常开发中&#xff0c;使用的数据库存储主要有两种…

面试题-Redis

Redis部分 讲一下你理解的Redis&#xff0c;为什么Redis很快 Redis是一种高性能的&#xff0c;开源的&#xff0c;C语言编写的非关系型数据库&#xff0c;可以对关系型数据库起到补充作用&#xff0c;同时支持持久化&#xff0c;可以将数据同步保存到磁盘 说Redis很快是相对…

Matlab进阶绘图第65期—带分组折线段的柱状图

带分组折线段的柱状图是在原始柱状图的基础上&#xff0c;在每组柱状图位置处分别添加折线段&#xff0c;以进行对比或添加额外信息。 由于Matlab中未收录带分组折线段的柱状图的绘制函数&#xff0c;因此需要大家自行设法解决。 本文使用自制的BarwithGroupedLine小工具进行…

大模型算法面试题(十四)

本系列收纳各种大模型面试题及答案。 1、微调后的模型出现能力劣化&#xff0c;灾难性遗忘是怎么回事 微调后的模型出现能力劣化&#xff0c;灾难性遗忘&#xff08;Catastrophic Forgetting&#xff09;是一个在机器学习领域&#xff0c;尤其是在深度学习和大模型应用中频繁出…

数据库(MySQL)-DQL数据查询语言

DQL(Data Query Language 数据查询语言)的用途是查询数据库数据&#xff0c;如select语句。其中&#xff0c;可以根据表的结构和关系分为单表查询和多表联查。 单表查询 单表查询&#xff1a;针对数据库中的一张数据表进行查询 全字段查询 语法&#xff1a;select 字段名 fro…

报警系统与机房动力环境监控系统的集成及报警功能实施

在当今的运维行业中&#xff0c;确保关键基础设施的安全与稳定运行面临着诸多挑战&#xff0c;如设备故障、环境异常、非法入侵等。为了有效应对这些挑战&#xff0c;报警系统与机房动力环境监控系统的集成变得至关重要。本文旨在为运维团队提供关于报警系统与机房动力环境监控…

使用frrouting、gns3、pim实现ipv6组播(三)

翻遍整个网络都没有找到用ipv6进行组播推流的实例。 朋友说&#xff1a;A true strong person never complains about the environment 那么&#xff0c;就由我来创造一个吧~ 此文涉及到的所有软件均为开源软件&#xff0c;进行深入学习与其他平台移植时十分便利。 记得点赞额…

25考研数据结构复习·6.2图的存储及基本操作

邻接矩阵 数组实现的顺序存储&#xff0c;空间复杂度高&#xff0c;不适合存储稀疏图 &#x1f469;‍&#x1f4bb; 如何求顶点的度、入度、出度&#xff1f; 无向图 第i个结点的度 第i行&#xff08;或第i列&#xff09;的非零元素个数。有向图 第i个结点的出度 第i行非零…

如何在GPU服务器上安装Stable Diffusion webUI

一、前提条件 1、硬件条件 GPU&#xff1a;12G&#xff0c;建议16G以上&#xff0c;还是尽量勾搭&#xff0c;好像现在最大32G&#xff0c;目前个人性价比24G有时长出售。 内存&#xff1a;16G以上&#xff0c;建议32G&#xff0c;也是越大越好。 硬盘&#xff1a;最好使用…

2024年【金属非金属矿山(地下矿山)安全管理人员】考试报名及金属非金属矿山(地下矿山)安全管理人员模拟考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年金属非金属矿山&#xff08;地下矿山&#xff09;安全管理人员考试报名为正在备考金属非金属矿山&#xff08;地下矿山&#xff09;安全管理人员操作证的学员准备的理论考试专题&#xff0c;每个月更新的金属非…