时间戳

首页 > 解决方案 > 在复杂板（矩阵）上的 Angular 中拖放

angular - 在复杂板（矩阵）上的 Angular 中拖放

问题描述

所以我想在 Angular 中制作我的 Battleships 游戏版本，为此我需要一个 10x10 矩阵，我可以在其中拖放船只（如果你玩过游戏，你就知道我在说什么）而且我正在使用Angular Cdk，但我根本无法让它工作。

到目前为止，我尝试的是用 div 制作一个表格，将元素放在一边并将它们拖放到板上，但我无法连接这两个数组，因为船舶数组没有嵌套，而板子是嵌套的。

编辑：这是 stackblitz 示例的链接：https ://stackblitz.com/edit/angular-pp24ad

值得注意的是，矩阵中充满了 IBox，这将有助于稍后的游戏实现。我不确定是否必须更改船舶的数据结构。例如，作为另一个矩阵，我从中取出船只并转移到板上，但我仍然无法弄清楚拖动。我仍然不确定这是解决这个问题的最佳方法，所以我愿意改变解决问题的方法。

标签： angulardrag-and-dropangular-materialangular-cdk

解决方案

你需要定义两个“cdkDropList”。cdkDropList 不是必需的列表，在您的情况下，您可以为“可用船只”提供一个简单的 div，以及一个样式为 position:relative 的 div，因为您想将“船只”放置在绝对位置。

作为想法，在 cdkDropList 之间传递的数据是具有名称、大小、顶部和左侧的对象，因此（假设您有一个“ship-component”）。请记住，Angular 工作关系模型（ts 中的变量）和视图（我们如何显示这些变量）。所以这个想法是有两个数组并将元素从一个传递到另一个

可用船是

<div cdkDropList #cdkShips=cdkDropList 
        [cdkDropListData]="ships" class="ship-list"
        [cdkDropListConnectedTo]="[cdkBoard]" 
        (cdkDropListDropped)="drop($event)" 
        cdkDropListSortingDisabled="true">

        <ng-container *ngFor="let ship of ships">
            <div cdkDrag [style.size]="50*ship.size+'px'">
                <app-ship [name]="ship.name" [size]="ship.size"></app-ship>
                <div *cdkDragPlaceholder></div>
            </div>
        </ng-container>
    </div>

而“板”是

<div cdkDropList #cdkBoard=cdkDropList style="position:relative" 
     [cdkDropListData]="shipsInBoard" 
     [cdkDropListConnectedTo]="[cdkShips]"
     (cdkDropListDropped)="drop($event)" 
     cdkDropListSortingDisabled="true">

    <ng-container *ngFor="let ship of shipsInBoard">
        <div style="position:absolute" 
            [style.top]="ship.top+'px'" 
            [style.left]="ship.left+'px'" cdkDrag>
            <app-ship [name]="ship.name" [size]="ship.size"></app-ship>
            <div *cdkDragPlaceholder></div>
        </div>
    </ng-container>

    <!---this it's only to draw the board-->
    <div class="row" *ngFor="let row of board;let i=index">
        <div class="cell" *ngFor="let box of row;let j=index" id='columns'>
            <button #bt mat-button class="bt-cell" 
              (mouseover)="position=bt.getBoundingClientRect()">
            </button>
        </div>
    </div>
</div>

看

  1. 在“board”中，我们使用 [style.top] 和 [style.left] 放置“ships”
  2. 我们定义了 [cdkDropListConnectedTo]="[cdkBoard]" 和 [cdkDropListConnectedTo]="[cdkShips]"
  3. 我们有两个数组——它们是要交换的数据：ships 和 shipInBoard

drop 事件是给 top 和 left 赋值，之后交换数组中的元素

  drop(event: CdkDragDrop<string[]>) {
      event.previousContainer.data[event.previousIndex].top=this.position?
            this.position.y-this.boardElement.nativeElement.getBoundingClientRect().y:
            0
      event.previousContainer.data[event.previousIndex].left=this.position?
        this.position.x-this.boardElement.nativeElement.getBoundingClientRect().x:
            0

    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
  }

我制作了一个“傻瓜”应用程序，例如

<div class="ship-box" [style.width]="52*size+'px'"  >
        {{name}}
   <div class="ship-drop-wrapper">
      <div *ngFor="let i of [0,1,2,3,4].slice(0,size)" class="ship-box-cell" 
        (mouseover)="index=i">
      </div>
   </div>
</div>

你可以看到stackblitz

注意：您会注意到，当您将一艘船拖到船上时，它会在您预期的上方排成一行。这是因为“可用船只”改变了高度

注意2：您需要在“船舶”中添加一个新属性“旋转”以显示在旋转位置 - 使用 [style.transform]='rotate(90deg)'-

推荐阅读