我正在创建一个显示房间内人员的网络应用程序。当我将一个人从一个房间拖到另一个房间时,即使页面刷新后,我也希望那个人留在该房间中。我已经研究过,但无济于事,我如何实现这一目标。
我的代码是html:
<div class="container">
<h2>Studio 1</h2>
<div cdkDropList #doneMovieList="cdkDropList" [cdkDropListData]="MoviesWatched"
[cdkDropListConnectedTo]="[moviesList, toglist, ppolist]" class="movie-list"
(cdkDropListDropped)="onDrop($event)">
<div class="movie-block" *ngFor="let moviesWatched of MoviesWatched" cdkDrag>.
{{moviesWatched}}</div>
</div>
</div>
<div id="first" class="bottompanel">
<h2>People</h2>
<div cdkDropList #moviesList="cdkDropList" [cdkDropListData]="MoviesList"
[cdkDropListConnectedTo]="[doneMovieList, donestudio2, donestudio3, donestudio4,
donestudio5, donestudio6, donestudio7]" class="movie-list" (cdkDropListDropped)="onDrop($event)">
<div class="movie-block" *ngFor="let moviesList of MoviesList" cdkDrag>{{moviesList}}</div>
</div>
TS
import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
Movies = [
'terrence',
'pops',
'phil',
'jack'
];
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.Movies, event.previousIndex, event.currentIndex);
}
// Transfer Items Between Lists
MoviesList = [
'terrence',
'pops',
'phil',
'jack'
];
togList = [
'PHIL',
'CARL',
'JAMES',
'BEN'
];
ppoList = [
'Adam',
'Benji',
'Kris',
'George'
];
MoviesWatched = [
];
onDrop(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);
}
}
}
任何帮助将不胜感激。同样,关于实现该目标的其他可能更好的方法的任何建议也都很好。总体目标是创建一个页面,您可以看到人们所在的房间,并具有良好的可用性功能,例如拖放。