0

我正在尝试使用新的 Angular 7 CDK 拖放来移动我网站中动态添加的元素列表。

使用这个示例，取自 Angular 文档示例并根据我的需要进行修改，您可以看到我有一个带有可放置容器的元素列表。

问题是当可拖动元素从另一个组件生成时，它们不会将父可放置作为要使用的引用可放置容器。相反，CDK Draggable 对象中的可放置容器属性是null.

我尝试设置指令中的cdkDragRootElement属性CdkDrag以检查是否可以以某种方式引用父元素，但它使元素移动整个父元素。这不是预期的行为。

也许我错过了 CDK Draggable 属性或在 CDK Droppable 容器中引用列表元素中的父可放置列表？

这是示例中的“相关”代码：

cdk-拖放-排序-example.html

<div cdkDropList class="example-list">
  <app-test></app-test>
</div>

测试/test.component.ts

import { Component, OnInit } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  movies = [
    'Episode I - The Phantom Menace',
    'Episode II - Attack of the Clones',
    'Episode III - Revenge of the Sith',
    'Episode IV - A New Hope',
    'Episode V - The Empire Strikes Back',
    'Episode VI - Return of the Jedi',
    'Episode VII - The Force Awakens',
    'Episode VIII - The Last Jedi'
  ];

  constructor() { }

  ngOnInit() {
  }

  drop(event: CdkDragDrop<string[]>) {
    console.log(event);
    /*moveItemInArray(this.movies, event.previousIndex, event.currentIndex);*/
  }

}

测试/test.component.html

<div class="example-box" *ngFor="let movie of movies" cdkDrag (cdkDragDropped)="drop($event)">
  {{movie}}
</div>

编辑

预期结果：

cdk-拖放-排序-example.html

<div cdkDropList class="example-list">
  <app-test></app-test>
</div>

测试/test.component.html

<div class="example-box" *ngFor="..." cdkDrag cdkDropList=".example-list">
  {{movie}}
</div>

通过父母找到选择器并检查它是否具有cdkDropList指令/实例并将其附加到cdkDrag.

4

2 回答 2

0

问题是当您在组件级别添加时，DOM 无法识别 cdkdropList。有两种方法可以做到这一点。
1）如果我们将 cdkDragList 移动到测试组件中。这很明显，您可能不感兴趣。
2）您可以使用 DragDrop Service 在父级添加拖动列表。Angular CDK 7.3.7 发布了这种使用拖放作为服务的功能。


参考 stackblitz https://stackblitz.com/edit/angular-ngtemplate-reorder-7i6uuk?file=src%2Fapp%2Fapp.component.ts使用服务实现拖放。

于 2019-03-28T15:40:30.920 回答
0

属性cdkDropList必须打开app-test- 这是带有项目列表的 DOM 元素

于 2018-10-30T09:01:16.140 回答