首页
/ 推荐开源项目：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
登录后查看全文
热门项目推荐
相关项目推荐

项目优选

收起
kernelkernel
deepin linux kernel
C
28
16
atomcodeatomcode
Claude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。 ｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get Started
Rust
576
99
docsdocs
暂无描述
Dockerfile
710
4.51 K
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
958
955
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
1.61 K
942
pytorchpytorch
Ascend Extension for PyTorch
Python
573
694
kernelkernel
openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
414
339
cherry-studiocherry-studio
🍒 Cherry Studio 是一款支持多个 LLM 提供商的桌面客户端
TypeScript
1.43 K
116
flutter_flutterflutter_flutter
暂无简介
Dart
952
235
nop-entropynop-entropy
Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用
Java
12
2