قابلیت کشیدن و رها کردن (ngDragDrop) در انگولار — به زبان ساده

1<div style="text-align:center">
2  <h1>
3    Welcome to ngDragDropg at <a href="https://sibeeshpassion.com">Sibeesh Passion</a>
4  </h1>
5</div>

1<p>
2  Copyright @SibeeshPassion 2018 - 2019 :)
3</p>

1import { NgModule } from '@angular/core';
2import { Routes, RouterModule } from '@angular/router';
3import { HomeComponent } from './home/home.component';
4const routes: Routes = [
5  {
6    path: '',
7    redirectTo: '/home',
8    pathMatch: 'full'
9  },
10  {
11    path: 'home',
12    component: HomeComponent
13  }
14];
15@NgModule({
16  imports: [RouterModule.forRoot(routes)],
17  exports: [RouterModule]
18})
19export class AppRoutingModule { }

1<app-header></app-header>
2<router-outlet>
3</router-outlet>
4<app-footer></app-footer>

1import { BrowserModule } from '@angular/platform-browser';
2import { NgModule } from '@angular/core';
3import { MatButtonModule, MatCheckboxModule, MatMenuModule, MatCardModule, MatSelectModule } from '@angular/material';
4import { AppRoutingModule } from './app-routing.module';
5import { AppComponent } from './app.component';
6import { HeaderComponent } from './header/header.component';
7import { FooterComponent } from './footer/footer.component';
8import { HomeComponent } from './home/home.component';
9import { MovieComponent } from './movie/movie.component';
10import { MovieService } from './movie.service';
11import { HttpModule } from '@angular/http';
12import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
13import { DragDropModule } from '@angular/cdk/drag-drop';
14@NgModule({
15  declarations: [
16    AppComponent,
17    HeaderComponent,
18    FooterComponent,
19    HomeComponent,
20    MovieComponent
21  ],
22  exports: [
23    HttpModule,
24    BrowserModule,
25    AppRoutingModule,
26    DragDropModule,
27    MatButtonModule, MatCheckboxModule, MatMenuModule, MatCardModule, MatSelectModule, BrowserAnimationsModule
28  ],
29  imports: [
30    HttpModule,
31    BrowserModule,
32    AppRoutingModule,
33    DragDropModule,
34    MatButtonModule, MatCheckboxModule, MatMenuModule, MatCardModule, MatSelectModule, BrowserAnimationsModule
35  ],
36  providers: [MovieService],
37  bootstrap: [AppComponent]
38})
39export class AppModule { }

1import { Injectable } from '@angular/core';
2import { RequestMethod, RequestOptions, Request, Http } from '@angular/http';
3import { config } from './config';
4@Injectable({
5  providedIn: 'root'
6})
7export class MovieService {
8  constructor(private http: Http) {
9  }
10async get(url: string) {
11    return await this.request(url, RequestMethod.Get);
12  }
13async request(url: string, method: RequestMethod) {
14    const requestOptions = new RequestOptions({
15      method: method,
16      url: `${config.api.baseUrl}${url}${config.api.apiKey}`
17    });
18const request = new Request(requestOptions);
19    return await this.http.request(request).toPromise();
20  }
21}

1const config = {
2    api: {
3        baseUrl: 'https://api.themoviedb.org/3/movie/',
4        apiKey: '&api_key=c412c072676d278f83c9198a32613b0d',
5        topRated: 'top_rated?language=en-US&page=1'
6    }
7};
8export { config };

1<mat-card>
2  <img mat-card-image src="https://image.tmdb.org/t/p/w185_and_h278_bestv2/{{movie?.poster_path}}" >
3</mat-card>

1import { Component, OnInit, Input } from '@angular/core';
2import { Movie } from '../models/movie';
3@Component({
4  selector: 'app-movie',
5  templateUrl: './movie.component.html',
6  styleUrls: ['./movie.component.scss']
7})
8export class MovieComponent implements OnInit {
9  @Input()
10  movie: Movie;
11  
12  constructor() { 
13  }
14ngOnInit() {
15  }
16}

1<div cdkDropList #allmovies="cdkDropList" [cdkDropListData]="movies" [cdkDropListConnectedTo]="[towatch]" (cdkDropListDropped)="drop($event)">
2    <app-movie *ngFor="let movie of movies" [movie]="movie" cdkDrag></app-movie>
3</div>

1<div cdkDropList #towatch="cdkDropList" [cdkDropListData]="moviesToWatch" [cdkDropListConnectedTo]="[allmovies]" (cdkDropListDropped)="drop($event)">
2    <app-movie *ngFor="let movie of moviesToWatch" [movie]="movie" cdkDrag></app-movie>
3</div>

1<div style="display: flex;">
2  <div class="container">
3    <div class="row">
4      <h2 style="text-align: center">Movies</h2>
5      <div  cdkDropList #allmovies="cdkDropList" [cdkDropListData]="movies" [cdkDropListConnectedTo]="[towatch]"
6        (cdkDropListDropped)="drop($event)">
7        <app-movie *ngFor="let movie of movies" [movie]="movie" cdkDrag></app-movie>
8      </div>
9    </div>
10  </div>
11  <div class="container">
12    <div class="row">
13      <h2 style="text-align: center">Movies to watch</h2>
14      <div cdkDropList #towatch="cdkDropList" [cdkDropListData]="moviesToWatch" [cdkDropListConnectedTo]="[allmovies]"
15        (cdkDropListDropped)="drop($event)">
16        <app-movie *ngFor="let movie of moviesToWatch" [movie]="movie" cdkDrag></app-movie>
17      </div>
18    </div>
19  </div>
20</div>

1import { Component } from '@angular/core';
2import { MovieService } from '../movie.service';
3import { Movie } from '../models/movie';
4import { config } from '../config';
5import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
6@Component({
7  selector: 'app-home',
8  templateUrl: './home.component.html',
9  styleUrls: ['./home.component.scss']
10})
11export class HomeComponent {
12  movies: Movie[];
13  moviesToWatch: Movie[] = [{
14    poster_path: '/uC6TTUhPpQCmgldGyYveKRAu8JN.jpg'
15  }];
16  constructor(private movieService: MovieService) {
17    this.getMovies();
18  }
19  private async getMovies() {
20    const movies = await this.movieService.get(config.api.topRated);
21    return this.formatDta(movies.json().results);
22  }
23  formatDta(_body: Movie[]): void {
24    this.movies = _body.filter(movie => movie.poster_path !== '/uC6TTUhPpQCmgldGyYveKRAu8JN.jpg');
25  }
26  drop(event: CdkDragDrop<string[]>) {
27    if (event.previousContainer === event.container) {
28      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
29    } else {
30      transferArrayItem(event.previousContainer.data,
31        event.container.data,
32        event.previousIndex,
33        event.currentIndex);
34    }
35  }
36}

1private async getMovies() {
2    const movies = await this.movieService.get(config.api.topRated);
3    return this.formatDta(movies.json().results);
4}

1moviesToWatch: Movie[] = [{
2    poster_path: '/uC6TTUhPpQCmgldGyYveKRAu8JN.jpg'
3  }];

1formatDta(_body: Movie[]): void {
2   this.movies = _body.filter(movie => movie.poster_path !== '/uC6TTUhPpQCmgldGyYveKRAu8JN.jpg');
3}

1drop(event: CdkDragDrop<string[]>) {
2   if (event.previousContainer === event.container) {
3     moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
4   } else {
5     transferArrayItem(event.previousContainer.data,
6       event.container.data,
7       event.previousIndex,
8       event.currentIndex);
9   }
10 }

1import { Component } from '@angular/core';
2import { MovieService } from '../movie.service';
3import { Movie } from '../models/movie';
4import { config } from '../config';
5import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
6@Component({
7  selector: 'app-home',
8  templateUrl: './home.component.html',
9  styleUrls: ['./home.component.scss']
10})
11export class HomeComponent {
12  movies: Movie[];
13  moviesToWatch: Movie[] = [{
14    poster_path: '/uC6TTUhPpQCmgldGyYveKRAu8JN.jpg'
15  }];
16  constructor(private movieService: MovieService) {
17    this.getMovies();
18  }
19  private async getMovies() {
20    const movies = await this.movieService.get(config.api.topRated);
21    return this.formatDta(movies.json().results);
22  }
23  formatDta(_body: Movie[]): void {
24    this.movies = _body.filter(movie => movie.poster_path !== '/uC6TTUhPpQCmgldGyYveKRAu8JN.jpg');
25  }
26  drop(event: CdkDragDrop<string[]>) {
27    if (event.previousContainer === event.container) {
28      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
29    } else {
30      transferArrayItem(event.previousContainer.data,
31        event.container.data,
32        event.previousIndex,
33        event.currentIndex);
34    }
35  }
36}

1.container{
2  border: 1px solid rgb(248, 144, 144);
3  margin: 5%;
4  overflow: auto;
5  width: 40%;
6  height: 500px;
7}
8app-movie{
9  cursor: move;
10  width: 50%;
11  display: inline-flex;
12}

1mat-card{
2    width: 70%;
3    padding: 26px;
4    margin: 5px;
5    border: 1px solid;
6}