Как вы можете сохранить состояние / положение перетаскиваемых объектов, используя Angular Drag and Drop - PullRequest
Новая
       6

Как вы можете сохранить состояние / положение перетаскиваемых объектов, используя Angular Drag and Drop

0 голосов
/ 19 марта 2020

Я создаю веб-приложение, которое показывает людей в комнатах. Когда я перетаскиваю человека из одной комнаты в другую, я хочу, чтобы он оставался в этой комнате даже после ссылки на страницу sh. Как мне этого добиться, я изучил это, но безрезультатно.

Мой код 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);
    }
  }
}

Любая помощь будет принята с благодарностью. Также были бы полезны любые предложения по другим, возможно, потенциально лучшим способам достижения этой цели. Общая цель состоит в том, чтобы создать страницу, на которой можно было бы видеть комнаты, в которых находятся люди, с хорошими функциями удобства использования, такими как перетаскивание.

...