Angular-Gridster2

Question

Angular 版本 - 4.0.0

angular-gridster2 - 2.10.0

将项目随机拖动到其他项目上时，项目会重叠（如下图所示）

圈出的数字是cols X rows

组件：

   private initialize() {
     this.options = {
      direction: 'vertical',
      gridType: 'fixed',
      compactUp: false,
      compactLeft: false,
      margin: 25,
      outerMargin: true,
      pushItems: true,
      minCols: 3,
      maxCols: 3,
      minRows: 2,
      maxRows: 100,
      maxItemCols: 100,
      minItemCols: 1,
      maxItemRows: 100,
      minItemRows: 1,
      defaultItemCols: 1,
      defaultItemRows: 1,
      fixedColWidth: 340,
      fixedRowHeight: 252,
      displayGrid: 'none'
     };

    if (this.allowEdit) {
      this.setDraggableAndResizableOptions();
    }
  }

  setDraggableAndResizableOptions() {
    this.options.itemChangeCallback = this.itemChange.bind(this);
    this.options.itemResizeCallback = GridsterViewComponent.itemResize;
    this.options.draggable = {
      enabled: this.allowEdit,
      stop: this.eventStop.bind(this)
    };
    this.options.resizable = {
      enabled: false,
      stop: this.eventStop.bind(this)
    };
    this.options.displayGrid = 'onDrag&Resize';
  }

HTML:

<gridster [options]="options" [style.background-color]="allowEdit?'white':'white'">
      <gridster-item [item]="item" *ngFor="let item of widgets; let i = index;" class="sortable-handler">
        <div [ngClass]="{'add-widget': item.addNew}">
          <div class="row gridster-item-header">
            <div class="col-12 gridster-item-label">
              <span>{{item.name}}</span>
              <div class="gridster-item-button" *ngIf="!item.addNew && allowEdit">
                <button (touchstart)="customizeWidget(item)" (mousedown)="customizeWidget(item)" class="btn btn-secondary">
                  <span class="fa action-button-sm action-button-customize-item"></span>
                </button>
                <button (touchend)="deleteWidget(item.id, i)" (mousedown)="deleteWidget(item.id, i)" class="btn btn-secondary">
                  <span class="fa action-button-sm action-button-delete-item"></span>
                </button>
              </div>
            </div>
          </div>
          <img *ngIf="!item.addNew" class="image-height" [src]="item.label" alt="item-label"/>
          <div *ngIf="item.addNew" style="background-image: {{item.label}}">
            <app-add-widget-item (touchstart)="openWidgetModal($event)" (mousedown)="openWidgetModal($event)"></app-add-widget-item>
          </div>
        </div>
      </gridster-item>
    </gridster>

上述行为是随机发生的。没有一组特定的步骤来重现此错误。你能告诉我哪里做错了吗？

Answer 1

这是一个已知问题，已在 3.15.2 中修复问题 Link：https://github.com/tiberiuzuld/angular-gridster2/issues/145

Angular-Gridster2 - 拖动时网格项目重叠

Angular-Gridster2 - Grid items overlap on drag

overlap

angular