首页
/ 推荐开源项目：GridList - 二维可调整大小响应式列表的拖放库

推荐开源项目：GridList - 二维可调整大小响应式列表的拖放库

2026-01-19 10:44:15作者：姚月梅Lane
grid
Drag and drop library for two-dimensional, resizable and responsive lists
项目地址：https://gitcode.com/gh_mirrors/gr/grid

还在为构建复杂的网格布局而烦恼吗？还在寻找一个既能处理拖放交互又能自动处理碰撞检测的网格系统吗？GridList 正是你需要的解决方案！

读完本文，你将获得：

  • GridList 的核心功能与架构解析
  • 完整的使用指南与代码示例
  • 与同类库的对比分析
  • 实际应用场景与最佳实践

GridList 是什么？

GridList 是一个专为二维可调整大小和响应式列表设计的拖放库。它采用独特的双架构设计：

  1. GridList 核心类 - 纯 JavaScript 实现，负责管理虚拟矩阵中项目的二维位置
  2. jQuery 插件 - 基于核心类构建，将抽象位置转换为具有拖放功能的响应式 DOM 元素

核心特性对比表

特性 GridList Gridster 优势分析
维护状态 活跃开发 已停止维护 长期支持保障
方向支持 水平 + 垂直 仅垂直 更灵活的布局选择
代码体积 5倍更小 较大 性能更优，加载更快
碰撞处理 智能算法 基础处理 更好的用户体验
响应式设计 内置支持 需要额外配置 开箱即用的响应式
架构设计 前后端分离 紧耦合 服务端预计算支持

核心架构解析

GridList 类结构

classDiagram
    class GridList {
        -items: Array
        -grid: Array
        -options: Object
        +generateGrid()
        +resizeGrid(lanes)
        +moveItemToPosition(item, position)
        +resizeItem(item, size)
        +getChangedItems(initialItems, idAttribute)
    }
    
    class GridCol {
        +length: Number
        +push(item)
    }
    
    GridList --> GridCol : 包含

数据模型设计

GridList 使用简洁而强大的数据模型来表示网格项目：

// 项目数据结构
{
  w: 3,    // 宽度（占用的列数）
  h: 1,    // 高度（占用的行数）  
  x: 0,    // 水平位置（列索引）
  y: 1     // 垂直位置（行索引）
}

网格表示法

GridList 使用二维数组来表示网格结构，其中每个单元格指向占据该位置的项目引用：

flowchart TD
    A[网格数据结构] --> B[列数组]
    B --> C[行数组]
    C --> D[单元格指针]
    D --> E[项目引用或null]

快速入门指南

安装与引入

<!-- 引入依赖 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui@1.13.2/dist/jquery-ui.min.js"></script>

<!-- 引入 GridList -->
<script src="path/to/gridList.js"></script>
<script src="path/to/jquery.gridList.js"></script>

基础使用示例

<!DOCTYPE html>
<html>
<head>
  <title>GridList 示例</title>
  <style>
    .grid-container { width: 100%; height: 500px; border: 1px solid #ccc; }
    .grid { list-style: none; margin: 0; padding: 0; position: relative; }
    .grid li { 
      position: absolute; 
      background: #f0f0f0; 
      border: 1px solid #ddd;
      box-sizing: border-box;
    }
    .grid li .inner { padding: 10px; }
  </style>
</head>
<body>
  <div class="grid-container">
    <ul id="myGrid" class="grid">
      <li data-w="1" data-h="1" data-x="0" data-y="0"><div class="inner">项目 1</div></li>
      <li data-w="2" data-h="1" data-x="1" data-y="0"><div class="inner">项目 2</div></li>
      <li data-w="1" data-h="2" data-x="0" data-y="1"><div class="inner">项目 3</div></li>
    </ul>
  </div>

  <script>
    $(function() {
      $('#myGrid').gridList({
        lanes: 3,                    // 网格行数
        direction: 'horizontal',     // 布局方向
        widthHeightRatio: 1,         // 宽高比
        dragAndDrop: true            // 启用拖放
      });
    });
  </script>
</body>
</html>

核心 API 详解

1. 初始化配置

const grid = new GridList(items, {
  direction: 'horizontal', // 或 'vertical'
  lanes: 5                 // 固定行/列数
});

2. 网格操作方法

// 重新生成网格
grid.generateGrid();

// 调整网格大小
grid.resizeGrid(4);

// 移动项目到指定位置
grid.moveItemToPosition(item, [2, 1]);

// 调整项目大小
grid.resizeItem(item, { w: 2, h: 1 });

// 获取变更的项目
const changedItems = grid.getChangedItems(initialItems, 'id');

3. jQuery 插件方法

// 初始化
$('.grid').gridList(options, draggableOptions);

// 调整大小
$('.grid').gridList('resize', 4);

// 调整单个项目大小
$('.grid').gridList('resizeItem', itemElement, { w: 2, h: 1 });

// 重新布局
$('.grid').gridList('reflow');

高级功能与技巧

碰撞处理算法

GridList 采用智能的碰撞处理策略：

flowchart TD
    A[检测碰撞] --> B{尝试本地解决}
    B -->|成功| C[交换位置]
    B -->|失败| D[重新生成网格]
    C --> E[完成]
    D --> E

响应式设计实现

GridList 内置响应式支持，自动根据容器大小调整项目尺寸：

_calculateCellSize: function() {
  if (this.options.direction === "horizontal") {
    this._cellHeight = Math.floor(this.$element.height() / this.options.lanes);
    this._cellWidth = this._cellHeight * this.options.widthHeightRatio;
  } else {
    this._cellWidth = Math.floor(this.$element.width() / this.options.lanes);
    this._cellHeight = this._cellWidth / this.options.widthHeightRatio;
  }
}

自动大小项目

支持宽度或高度为 0 的项目，表示自动拉伸到网格的完整宽度或高度：

// 自动宽度项目（占满所有列）
{ w: 0, h: 1, x: 0, y: 0 }

// 自动高度项目（占满所有行）  
{ w: 1, h: 0, x: 0, y: 0 }

实际应用场景

1. 仪表盘构建

// 创建仪表盘网格
const dashboardItems = [
  { w: 2, h: 2, x: 0, y: 0, id: 'chart1' },
  { w: 2, h: 1, x: 2, y: 0, id: 'stats1' },
  { w: 2, h: 1, x: 2, y: 1, id: 'stats2' },
  { w: 4, h: 2, x: 0, y: 2, id: 'table1' }
];

const dashboardGrid = new GridList(dashboardItems, { lanes: 4 });

2. 图片画廊

// 创建响应式图片画廊
$('#gallery').gridList({
  lanes: 4,
  direction: 'horizontal',
  widthHeightRatio: 1.5, // 适应图片比例
  onChange: function(changedItems) {
    // 保存布局变更到后端
    saveLayout(changedItems);
  }
});

3. 项目管理看板

// 看板式项目管理界面
const kanbanGrid = new GridList([], {
  direction: 'vertical',
  lanes: 3 // 3列：待处理、进行中、已完成
});

// 动态添加任务卡片
function addTask(task, status) {
  const newItem = {
    w: 1, h: 1, 
    x: status === 'todo' ? 0 : status === 'doing' ? 1 : 2,
    y: kanbanGrid.items.length,
    task: task
  };
  kanbanGrid.items.push(newItem);
  kanbanGrid.generateGrid();
}

性能优化建议

1. 批量操作

// 不推荐：逐个操作
items.forEach(item => grid.moveItemToPosition(item, newPosition));

// 推荐：批量操作
grid._createGridSnapshot();
items.forEach(item => grid.moveItemToPosition(item, newPosition));
grid._updateGridSnapshot();

2. 合理使用自动大小

// 避免过度使用自动大小项目
// 推荐在真正需要拉伸的项目上使用
{ w: 0, h: 1 } // 占满宽度的时间轴
{ w: 1, h: 0 } // 占满高度的侧边栏

3. 缓存网格状态

// 缓存初始状态用于比较
const initialSnapshot = GridList.cloneItems(grid.items);

// 只处理变更的项目
const changedItems = grid.getChangedItems(initialSnapshot, 'id');
if (changedItems.length > 0) {
  updateBackend(changedItems);
}

常见问题解答

Q: GridList 支持现代前端框架吗？

A: 虽然 GridList 主要基于 jQuery，但其核心逻辑是框架无关的。你可以轻松地将 GridList 类集成到 React、Vue 或 Angular 项目中。

Q: 如何处理大量项目的性能问题？

A: GridList 已经过优化处理中等规模网格。对于超大网格，建议：

  • 使用虚拟滚动
  • 分批加载项目
  • 优化碰撞检测频率

Q: 如何自定义拖放样式？

A: 通过 jQuery UI Draggable 的选项来自定义：

$('.grid').gridList({ lanes: 4 }, {
  handle: '.drag-handle',
  opacity: 0.8,
  cursor: 'move'
});

总结

GridList 作为一个轻量级但功能强大的网格布局库，提供了：

  • 🎯 智能碰撞处理 - 先进的算法确保项目移动时的流畅体验
  • 📱 完全响应式 - 自动适应不同屏幕尺寸
  • 🔧 灵活配置 - 支持水平和垂直两种布局方向
  • 🚀 高性能 - 代码精简，运行效率高
  • 💡 易于集成 - 清晰的 API 设计和丰富的文档

虽然项目标记为已弃用，但其设计理念和实现方式仍然值得学习和借鉴。对于需要自定义网格布局解决方案的开发者来说，GridList 的源代码是宝贵的学习资源。

无论你是要构建仪表盘、图片画廊还是项目管理工具，GridList 都能为你提供稳定可靠的网格布局基础。开始使用 GridList，让你的界面布局更加灵活和智能！

grid
Drag and drop library for two-dimensional, resizable and responsive lists
项目地址：https://gitcode.com/gh_mirrors/gr/grid
登录后查看全文

相关内容推荐

1 React Native Grid List 开源项目教程2 推荐一款轻量级的拖放库——draggable3 Dragula 的项目扩展与二次开发4 【亲测免费】 推荐开源项目：FormKit Drag and Drop - 简单易用的拖放排序库5 【亲测免费】 Flutter reorderables 项目推荐6 使用Jetpack Compose轻松实现拖放排序的Reorderable库7 探索 Android 拖动 FlowLayout：轻巧易用的布局扩展库8 【亲测免费】 探索优雅的拖放体验：react-beautiful-dnd9 推荐开源项目：react-beautiful-dnd——美观易用的React拖放库10 cloudtunes 的项目扩展与二次开发
热门项目推荐
相关项目推荐

热门内容推荐

1 【亲测免费】 开源项目 `build-your-own-x` 使用指南2 【亲测免费】 探索科技之旅：《Build Your Own X》项目详解3 GitHub_Trending/bu/build-your-own-x自动化：CI/CD流程在自制项目中的应用4 从零打造智能家居系统：用build-your-own-x实现家庭自动化

最新内容推荐

5分钟掌握ImageSharp色彩矩阵变换：图像色调调整的终极指南3分钟解决Cursor试用限制：go-cursor-help工具全攻略Transmission数据库迁移工具：转移种子状态到新设备如何在VMware上安装macOS？解锁神器Unlocker完整使用指南如何为so-vits-svc项目贡献代码：从提交Issue到创建PR的完整指南Label Studio数据处理管道设计：ETL流程与标注前预处理终极指南突破拖拽限制：React Draggable社区扩展与实战指南如何快速安装 JSON Formatter：让 JSON 数据阅读更轻松的终极指南Element UI表格数据地图：Table地理数据可视化如何快速去除视频水印？免费开源神器「Video Watermark Remover」一键搞定！

项目优选

收起
kernelkernel
deepin linux kernel
C
27
11
docsdocs
OpenHarmony documentation | OpenHarmony开发者文档
Dockerfile
528
3.73 K
pytorchpytorch
Ascend Extension for PyTorch
Python
336
401
flutter_flutterflutter_flutter
暂无简介
Dart
768
191
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
883
590
kernelkernel
openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
336
172
ohos_react_nativeohos_react_native
React Native鸿蒙化仓库
JavaScript
302
353
nop-entropynop-entropy
Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用
Java
12
1
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
1.33 K
750
agent-studioagent-studio
openJiuwen agent-studio提供零码、低码可视化开发和工作流编排，模型、知识库、插件等各资源管理能力
TSX
986
246