如何使用“角度拖放”保存被拖动项目的状态/位置

时间:2020-03-19 12:22:53

标签: html css angular web-applications drag-and-drop

我正在创建一个显示房间内人员的网络应用程序。当我将一个人从一个房间拖到另一个房间时,即使页面刷新后,我也希望那个人留在该房间中。我已经研究过,但无济于事,我如何实现这一目标。

我的代码是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);
    }
  }
}

任何帮助将不胜感激。同样,关于实现该目标的其他可能更好的方法的任何建议也都很好。总体目标是创建一个页面,您可以看到人们所在的房间,并具有良好的可用性功能,例如拖放。

0 个答案:

没有答案