import { GridStack } from 'gridstack';

ngOnInit() {
  // 确保正确初始化
  const grid = GridStack.init({
    float: true,  // 允许元素浮动
    cellHeight: '70px',  // 设置单元格高度
    margin: 10,  // 设置边距
    draggable: { handle: '.grid-stack-item-content' },  // 设置可拖动区域
    resizable: { autoHide: true, handles: 'e, se, s, sw, w' }  // 设置可调整大小
  });
}

/* 确保包含必要的样式 */
@import 'gridstack/dist/gridstack.min.css';

/* 自定义样式时避免冲突 */
.grid-stack-item-content {
  touch-action: none; /* 解决移动端拖动问题 */
}

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

initGrid() {
  const grid = GridStack.init();
  
  grid.on('dragstop', (event, element) => {
    // 手动触发变更检测
    this.cdr.detectChanges();
  });
}

addNewItem() {
  const grid = GridStack.getInstance();
  grid.addWidget({
    w: 2, h: 2,
    content: '<div class="grid-stack-item-content">New Item</div>'
  });
}

import { NgxGridstackComponent } from 'ngx-gridstack';

@Component({
  template: `
    <ngx-gridstack [options]="gridOptions" (onChange)="onChange($event)">
      <div *ngFor="let item of items" [gs-w]="item.w" [gs-h]="item.h">
        {{item.content}}
      </div>
    </ngx-gridstack>
  `
})
export class DashboardComponent {
  gridOptions = {
    float: true,
    draggable: { handle: '.grid-stack-item-content' },
    resizable: { handles: 'all' }
  };
  
  onChange(event) {
    console.log('布局变化:', event);
  }
}