我决定从我的大项目中进行较小的实施。目前,我正在尝试为拖放功能返工列表。在我的项目中,我在列表中看到名称,但无法拖放任何内容。在 stackblitz 中,我什至无法在我的列表中显示任何内容。我用它来进行拖放。有我的堆栈闪电战,实现更小。
编辑 1
拖放与材质列表相结合会很好。
编辑 2
当我从文件元素中删除 observable 时,错误消失了,但遗憾的是仍然无法正常工作。那里需要可观察的。
TS 文件
import { Component } from "@angular/core";
import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
import { Observable } from "rxjs";
;
import { transferArrayItem} from '@angular/cdk/drag-drop';
import * as i0 from "@angular/core";
/**
* @title Drag&Drop sorting
*/
@Component({
selector: "cdk-drag-drop-sorting-example",
templateUrl: "cdk-drag-drop-sorting-example.html",
styleUrls: ["cdk-drag-drop-sorting-example.css"]
})
export class CdkDragDropSortingExample {
todo = [
{
name: "Pictures",
extension: ""
},
{
name: "Movies",
extension: ""
}
];
done = [
{
name: "Pictures2",
extension: ""
},
{
name: "Movies2",
extension: ""
}
];
ngOnInit() {}
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 class="example-container">
<h2>To do</h2>
<div
cdkDropList
#todoList="cdkDropList"
[cdkDropListData]="todo"
[cdkDropListConnectedTo]="[doneList]"
class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of todo" cdkDrag>{{item.name}}</div>
</div>
</div>
<div class="example-container">
<h2>Done</h2>
<div
cdkDropList
#doneList="cdkDropList"
[cdkDropListData]="done"
[cdkDropListConnectedTo]="[todoList]"
class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of done" cdkDrag>{{item.name}}</div>
</div>
</div>