如何在两个组件之间使用Angular7（角度材质）拖放_Angular_Drag And Drop_Angular Material_Angular7_Angular Cdk

如何在两个组件之间使用Angular7（角度材质）拖放

angular angular-material

如何在两个组件之间使用Angular7（角度材质）拖放,angular,drag-and-drop,angular-material,angular7,angular-cdk,Angular,Drag And Drop,Angular Material,Angular7,Angular Cdk,最近，角材料中引入了阻力和阻力所有示例都在单个组件中描述。如何在两个不同的组件中使用此选项，请将一个组件项拖放到另一个组件中。您可以使用属性id和cdkDropListConnectedTo链接两个列表：组件1: <div cdkDropList id="list-1" cdkDropListConnectedTo="list-2" (cdkDropListDropped)="drop($event)"> <div *ngFor="let item of list

最近，角材料中引入了阻力和阻力

所有示例都在单个组件中描述。如何在两个不同的组件中使用此选项，请将一个组件项拖放到另一个组件中。

您可以使用属性id和cdkDropListConnectedTo链接两个列表：

组件1:

<div cdkDropList id="list-1" cdkDropListConnectedTo="list-2" (cdkDropListDropped)="drop($event)">
    <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
</div>

<div cdkDropList id="list-2" cdkDropListConnectedTo="list-1" (cdkDropListDropped)="drop($event)">
  <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
</div>

对于在列表之间移动项目，您可能希望集中跟踪列表。您可以通过使用服务、商店或其他方法来执行此操作。

不确定上述解决方案是否仍然适用于angular 7.2.9和angular material/cdk 7.3.5

它对我不起作用，因此在经历了一段艰难的时间后——我设法使用cdkDropListGroup指令使它起作用。cdkDropListGroup中的所有cdkDropList将可用于删除项目。您不再需要使用cdkDropListConnectedTo属性将下拉列表连接到

<div cdkDropListGroup>
<component1></component1>
<component2></component2>
</div>

组件1

<div cdkDropList id="list-1" cdkDropListConnectedTo="list-2" (cdkDropListDropped)="drop($event)">
    <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
</div>


{{item}}

组件2

<div cdkDropList id="list-2" cdkDropListConnectedTo="list-1" (cdkDropListDropped)="drop($event)">
  <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
</div>


{{item}}

两个组件的共享服务

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);
        }
    }

<div cdkDropListGroup>
<component1></component1>
<component2></component2>
</div>

<div class="wrapper">
  <div cdkDropListGroup>
    <app-test1></app-test1>
    <app-test2></app-test2>
  </div>
</div>

<div class="container">
  <h2>Movies</h2>
  <div cdkDropList [cdkDropListData]="MoviesList"
    class="movie-list" (cdkDropListDropped)="onDrop($event)">
    <div class="movie-block" *ngFor="let moviesList of MoviesList" cdkDrag>{{moviesList}}</div>
  </div>
</div>

  export class Test1Component implements OnInit {

  constructor(private ss: ShareService) { }

  ngOnInit() {
  }

  // Transfer Items Between Lists
  MoviesList = [
    'The Far Side of the World',
    'Morituri',
    'Napoleon Dynamite',
    'Pulp Fiction',
    'Blade Runner',
    'Cool Hand Luke',
    'Heat',
    'Juice'    
  ];


  onDrop(event: CdkDragDrop<string[]>) {
    this.ss.drop(event);
  }

}

<div class="container">
  <h2>Movies Watched</h2>
  <div cdkDropList [cdkDropListData]="MoviesWatched"
    [cdkDropListConnectedTo]="list-1" class="movie-list" (cdkDropListDropped)="onDrop($event)">
    <div class="movie-block" *ngFor="let moviesWatched of MoviesWatched" cdkDrag>{{moviesWatched}}</div>
  </div>
</div>

import { Component, OnInit } from '@angular/core';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
import { ShareService } from '../share.service';


@Component({
  selector: 'app-test2',
  templateUrl: './test2.component.html',
  styleUrls: ['./test2.component.css']
})
export class Test2Component implements OnInit {

  constructor(private ss: ShareService) { }

  MoviesWatched = [
   'Transformers'
  ];

  ngOnInit() {
  }

  onDrop(event: CdkDragDrop<string[]>) {
    this.ss.drop(event);
  }

}

drop（事件：CdkDragDrop）{
if（event.previousContainer==event.container）{
moveItemInArray（event.container.data、event.previousIndex、event.currentIndex）；
}否则{
transferArrayItem（event.previousContainer.data，
event.container.data，
event.previousIndex，
事件（当前索引）；
}
}

父组件

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);
        }
    }

<div cdkDropListGroup>
<component1></component1>
<component2></component2>
</div>

<div class="wrapper">
  <div cdkDropListGroup>
    <app-test1></app-test1>
    <app-test2></app-test2>
  </div>
</div>

<div class="container">
  <h2>Movies</h2>
  <div cdkDropList [cdkDropListData]="MoviesList"
    class="movie-list" (cdkDropListDropped)="onDrop($event)">
    <div class="movie-block" *ngFor="let moviesList of MoviesList" cdkDrag>{{moviesList}}</div>
  </div>
</div>

  export class Test1Component implements OnInit {

  constructor(private ss: ShareService) { }

  ngOnInit() {
  }

  // Transfer Items Between Lists
  MoviesList = [
    'The Far Side of the World',
    'Morituri',
    'Napoleon Dynamite',
    'Pulp Fiction',
    'Blade Runner',
    'Cool Hand Luke',
    'Heat',
    'Juice'    
  ];


  onDrop(event: CdkDragDrop<string[]>) {
    this.ss.drop(event);
  }

}

<div class="container">
  <h2>Movies Watched</h2>
  <div cdkDropList [cdkDropListData]="MoviesWatched"
    [cdkDropListConnectedTo]="list-1" class="movie-list" (cdkDropListDropped)="onDrop($event)">
    <div class="movie-block" *ngFor="let moviesWatched of MoviesWatched" cdkDrag>{{moviesWatched}}</div>
  </div>
</div>

import { Component, OnInit } from '@angular/core';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
import { ShareService } from '../share.service';


@Component({
  selector: 'app-test2',
  templateUrl: './test2.component.html',
  styleUrls: ['./test2.component.css']
})
export class Test2Component implements OnInit {

  constructor(private ss: ShareService) { }

  MoviesWatched = [
   'Transformers'
  ];

  ngOnInit() {
  }

  onDrop(event: CdkDragDrop<string[]>) {
    this.ss.drop(event);
  }

}

从两个组件调用drop方法

drop(event: CdkDragDrop<string[]>) {
      this.sharedService.drop(event);
  }

drop（事件：CdkDragDrop）{
this.sharedService.drop（事件）；
}

您只需要在服务中创建一个drop方法，并从两个组件调用该drop方法。并且必须在父组件上用cdkDropListGroup包装这两个组件

应用程序组件

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);
        }
    }

<div cdkDropListGroup>
<component1></component1>
<component2></component2>
</div>

<div class="wrapper">
  <div cdkDropListGroup>
    <app-test1></app-test1>
    <app-test2></app-test2>
  </div>
</div>

<div class="container">
  <h2>Movies</h2>
  <div cdkDropList [cdkDropListData]="MoviesList"
    class="movie-list" (cdkDropListDropped)="onDrop($event)">
    <div class="movie-block" *ngFor="let moviesList of MoviesList" cdkDrag>{{moviesList}}</div>
  </div>
</div>

  export class Test1Component implements OnInit {

  constructor(private ss: ShareService) { }

  ngOnInit() {
  }

  // Transfer Items Between Lists
  MoviesList = [
    'The Far Side of the World',
    'Morituri',
    'Napoleon Dynamite',
    'Pulp Fiction',
    'Blade Runner',
    'Cool Hand Luke',
    'Heat',
    'Juice'    
  ];


  onDrop(event: CdkDragDrop<string[]>) {
    this.ss.drop(event);
  }

}

<div class="container">
  <h2>Movies Watched</h2>
  <div cdkDropList [cdkDropListData]="MoviesWatched"
    [cdkDropListConnectedTo]="list-1" class="movie-list" (cdkDropListDropped)="onDrop($event)">
    <div class="movie-block" *ngFor="let moviesWatched of MoviesWatched" cdkDrag>{{moviesWatched}}</div>
  </div>
</div>

import { Component, OnInit } from '@angular/core';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
import { ShareService } from '../share.service';


@Component({
  selector: 'app-test2',
  templateUrl: './test2.component.html',
  styleUrls: ['./test2.component.css']
})
export class Test2Component implements OnInit {

  constructor(private ss: ShareService) { }

  MoviesWatched = [
   'Transformers'
  ];

  ngOnInit() {
  }

  onDrop(event: CdkDragDrop<string[]>) {
    this.ss.drop(event);
  }

}


要连接多重列表，请在拖放中使用blow代码
[cdkDropListConnectedTo]="['element-1', 'element-2', 'element-3', 'element-4']"

非常感谢。如果我想要像[cdkDropListConnectedTo]=“[list-2，list-3，list-4]这样的多个拖动块，这对于单个拖动块来说是很好的不起作用。如何实现that@JomyJoseph我已经更新了答案，以包括对多个列表之间链接的支持。如果这解决了您的问题，请接受答案。如果没有，请让我们知道。当然。您非常棒。我错过了每个id的单个报价。在angular 7.2.1中，我不得不使用[]在cdkDropListConnectedTo周围，甚至可以使用一个列表。[cdkDropListConnectedTo]=“[list-1]”或[cdkDropListConnectedTo]=“['list-1']”
@Dirk使用angular 7.2.0和angular material/cdk 7.2.1对其进行了测试，其工作语法与之前相同：cdkDropListConnectedTo=“list-1“
您的实现是什么，您能提供示例吗？因为我现在面临这个问题，如果没有连接，它将无法工作。我有一个组件列表，其中拖放是实现的，我想在这样的组中使用它。保存了一天！！工作示例：角阻力n下降