Question

我是Angular的新手。我想在我的angular 6应用程序中实现拖放功能。我遇到了一个非常好的图书馆“ CDK”。

我已经成功实现了在两个列表之间传输项目的功能。两个列表都在同一组件中。

现在，我正在努力分离出列表组件。我已经将droplist1放在list-a-component.html中，并将其项目数组放在list-a-component.html中。对于droplist2同样如此。

但是它不起作用。我可以移动列表中的项目，但不能从一个转移到另一个。

经调查发现，当HTML同时为两个列表呈现时，HTML缺少“ ng-reflect-connected-to”值。它为空。

<div _ngcontent-c1="" cdkdroplist="" class="example-list cdk-drop-list" ng-reflect-connected-to="" ng-reflect-data="Get to work,Pick up groceries," id="cdk-drop-list-2">

Answer 1

如果droplist（放置区）在其他组件中，则它不是直接的。为了使其正常工作，我们需要在源组件和目标组件中创建下拉列表，并使用 cdkDropListConnectedTo 连接两个下拉列表。

drag-source-componet.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-drag-source',
  templateUrl: './drag-source.component.html',
  styleUrls: ['./drag-source.component.css']
})
export class DragSourceComponent implements OnInit {
  data = [
    "apple",
    "boy",
    "cat",
    "dog",
    "elephant"
  ]
  constructor() { }

  ngOnInit() {
  }

}

.example-list {
  width: 500px;
  max-width: 100%;
  border: solid 1px #ccc;
  min-height: 60px;
  display: block;
  background: white;
  border-radius: 4px;
  overflow: hidden;
}

<p>
Drag Source 
</p>

<div id="source" cdkDropList [cdkDropListConnectedTo]="['destination']" class="example-list">
  <ul>
    <li cdkDrag [cdkDragData]="item" *ngFor="let item of data">
      {{ item }}
    </li>
  </ul>
</div>

drop-destination-componet.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-drop-destination',
  templateUrl: './drop-destination.component.html',
  styleUrls: ['./drop-destination.component.css']
})
export class DropDestinationComponent implements OnInit {
  data = []
  constructor() { }

  ngOnInit() {
  }

  drop(event) {
    this.data.push(event.item.data);
  }

}

.example-list {
  width: 500px;
  max-width: 100%;
  border: solid 1px #ccc;
  min-height: 60px;
  display: block;
  background: white;
  border-radius: 4px;
  overflow: hidden;
}

<p>
Destination Drop Zone
</p>

<div id="destination" class="example-list" style="height: 200px; border: 2px solid black" cdkDropList [cdkDropListConnectedTo]="['source']" (cdkDropListDropped)="drop($event)">
    <ul>
    <li *ngFor="let item of data">
      {{ item }}
    </li>
  </ul>
</div>

要查看完整的解决方案，请访问stackblitz

单独组件中的CDK DropList

1 个答案: