Перетащите Angular на сложную доску (матрицу) - PullRequest
Новая
       11

Перетащите Angular на сложную доску (матрицу)

0 голосов
/ 26 января 2020

Итак, я хочу сделать свою версию игры Battleships в Angular и для этого мне нужна матрица 10x10, в которой я могу перетаскивать корабли (если вы играли в игру, вы знаете, о чем я говорю) и я использую Angular Cdk, но я не могу заставить его работать вообще.

До сих пор я пытался создать таблицу из элементов div, отбросить элементы в сторону и перетащить их на доску. но я не могу соединить эти два массива, потому что массив кораблей не является вложенным, и плата есть.

Редактировать: Вот ссылка на пример стекаблица: https://stackblitz.com/edit/angular-pp24ad

Заметно, что матрица заполнена IBoxes, которые помогут позже во время реализации игры , Я не уверен, что мне придется менять структуру данных кораблей. Например, чтобы быть другой матрицей, из которой я беру корабли и перевожу на борт, но все же я не могу понять, что такое перетаскивание. Я до сих пор не уверен, что это лучший способ решить эту проблему, поэтому я готов изменить способ решения проблемы.

1 Ответ

1 голос
/ 27 января 2020

Вам нужно определить два "cdkDropList". Список cdkDropList не является обязательным списком, в вашем случае вы можете иметь простой div для «Доступных кораблей» и div с позицией стиля: относительный, потому что вы хотите поместить «корабли» в абсолютную позицию.

Как идея, данные для передачи между cdkDropList - это объекты с именами, размерами, сверху и слева, поэтому (представьте, что у вас есть «компонент-корабль»). Помните, 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. в «доску» мы помещаем «корабли», используя [style.top] и [style.left]
  2. Мы определили [cdkDropListConnectedTo] = "[cdkBoard]" и [cdkDropListConnectedTo] = "[cdkShips]"
  3. У нас есть два массива - это данные, которые будут взаимозаменяемы: ship и shipInBoard

Событие drop дает значение top и слева, и после, поменяйте местами элементы в массивах 

  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: вам рано нужно добавить новое свойство «rotate» для ваших «кораблей» для отображения в позиции поворота -use [style.transform] = 'rotate (90deg ) '-

...