Gridstack.js Angular 动态控制网格项拖拽与缩放功能

问题背景

在使用 Gridstack.js 的 Angular 封装版本时，开发者经常需要根据用户交互动态控制网格项的拖拽(drag)和缩放(resize)功能。一个典型场景是：初始状态下网格项不可拖拽和缩放，在用户执行某些操作后（如点击"编辑"按钮），才允许对这些网格项进行调整。

核心解决方案

Gridstack.js 提供了 staticGrid 属性来统一控制网格的交互状态：

1. 初始静态网格：通过设置 staticGrid: true 来禁用所有网格项的拖拽和缩放功能
2. 动态切换：使用 grid.setStatic(false) 方法来在运行时启用交互功能

Angular 实现示例

在 Angular 组件中，我们可以这样实现：

import { Component, ViewChild } from '@angular/core';
import { GridStackComponent, GridStackOptions } from 'gridstack';

@Component({
  selector: 'app-grid',
  template: `
    <button (click)="toggleEdit()">切换编辑模式</button>
    <gridstack [options]="gridOptions" #gridstackRef>
      <div gridstackItem [attr.gs-id]="'item1'" [attr.gs-w]="2" [attr.gs-h]="2">内容1</div>
      <div gridstackItem [attr.gs-id]="'item2'" [attr.gs-w]="3" [attr.gs-h]="1">内容2</div>
    </gridstack>
  `
})
export class GridComponent {
  @ViewChild('gridstackRef') gridstackRef?: GridStackComponent;
  
  gridOptions: GridStackOptions = {
    staticGrid: true, // 初始为静态不可交互
    margin: 5
  };

  isEditable = false;

  toggleEdit() {
    this.isEditable = !this.isEditable;
    if (this.gridstackRef?.gridstack) {
      this.gridstackRef.gridstack.setStatic(!this.isEditable);
    }
  }
}

实现原理

1. staticGrid 属性：这是 Gridstack.js 提供的一个全局开关，当设置为 true 时，会禁用网格中所有项的拖拽和缩放功能
2. setStatic 方法：这是 GridStack 实例提供的 API，可以在运行时动态切换网格的静态/交互状态
3. Angular 封装：通过 @ViewChild 获取 GridStackComponent 的引用，然后访问其底层的 gridstack 实例调用方法

注意事项

1. 在 Angular 中调用原生 Gridstack.js 方法时，需要确保组件已经完成初始化
2. 切换静态状态会影响网格中的所有项，无法单独控制某个特定项的交互状态
3. 如果需要在切换状态后保存布局，记得调用相关保存方法

扩展应用

这种动态控制交互状态的模式可以应用于多种场景：

1. 内容管理系统：普通用户查看时锁定布局，管理员登录后可编辑
2. 演示模式：演示时固定布局，避免误操作
3. 响应式设计：在不同屏幕尺寸下自动切换交互状态

通过合理使用 Gridstack.js 的静态模式功能，可以大大增强网格布局应用的用户体验和灵活性。