StackBlitz: https://stackblitz.com/edit/league-predictions сильный>
У меня есть проект, в котором я хочу прогнозировать турнирную таблицу футбольной лиги. У меня есть два списка: один - с прогнозами, второй - со всеми командами.
Вначале список прогнозов пуст, поэтому вы можете начать перетаскивать команды. Но поскольку он пуст, первая команда автоматически занимает первое место. Конечно, вы можете отсортировать их позже, но мне нужны заранее определенные слоты, основанные на количестве команд. Таким образом, вы можете перетаскивать команды прямо в нужное место.
Я не могу найти в Интернете решение, как этого добиться.
Это моя текущая ситуация, поэтому вы можете понять, о чем я говорю: Прогнозы лиги
И это то, чего я хочу достичь.
Кто-нибудь знает, как предопределить слоты для Angular CDK DragDrop
Это мой текущий код.
<div class="container">
<div class="example-container">
<h5>Predictions</h5>
<div
cdkDropList
#predictionsList="cdkDropList"
[cdkDropListData]="predictions"
[cdkDropListConnectedTo]="[teamList]"
class="example-list"
(cdkDropListDropped)="drop($event)"
>
<div class="example-box" *ngFor="let prediction of predictions; let i = index" cdkDrag>
<app-team [team]="prediction" [index]="i"></app-team>
</div>
</div>
</div>
<div class="example-container">
<h5>Teams</h5>
<div
cdkDropList
#teamList="cdkDropList"
[cdkDropListData]="teams"
[cdkDropListConnectedTo]="[predictionsList]"
class="example-list"
(cdkDropListDropped)="drop($event)"
>
<div class="example-box" *ngFor="let team of teams;" cdkDrag>
<app-team [team]="team"></app-team>
</div>
</div>
</div>
</div>
Не обращайте внимания на длинный список команды, это все данные из базы данных
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
predictions = [
];
teams = [
{
name: 'ADO Den Haag',
logo: 'Ado-Den-Haag-Logo.png'
},
{
name: 'Ajax',
logo: 'AFC-Ajax-Logo.png'
},
{
name: 'AZ',
logo: 'AZ-Alkmaar-Logo.png'
},
{
name: 'FC Emmen',
logo: 'FC-Emmen-Logo.png'
},
{
name: 'FC Groningen',
logo: 'FC-Groningen-Logo.png'
},
{
name: 'FC Twente',
logo: 'fc-twente-logo.png'
},
{
name: 'FC Utrecht',
logo: 'FC-Utrecht-Logo.png'
},
{
name: 'Feyenoord',
logo: 'Feyenoord-Rotterdam-Logo.png'
},
{
name: 'Fortuna Sittard',
logo: 'Fortuna-Sittard-Logo.png'
},
{
name: 'Heracles',
logo: 'Heracles-Almelo-Logo.png'
},
{
name: 'PEC Zwolle',
logo: 'PEC-Zwolle-Logo.png'
},
{
name: 'PSV',
logo: 'PSV-Eindhoven-Logo.png'
},
{
name: 'RKC Waalwijk',
logo: 'rkc-waalwijk.png'
},
{
name: 'SC Heerenveen',
logo: 'SC-Heerenveen-Logo.png'
},
{
name: 'Sparta Rotterdam',
logo: 'Sparta_Rotterdam_logo.png'
},
{
name: 'Vitesse',
logo: 'Vitesse-Arnhem-Logo.png'
},
{
name: 'VVV Venlo',
logo: 'VVV-Venlo-Logo.png'
},
{
name: 'Willem II',
logo: 'Willem-II-Logo.png'
},
];
drop(event: CdkDragDrop<string[]>) {
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);
}
}
}