[英]Drag and drop custom static components using Angular Material CDK
參考 Angular CDK 拖放,我正在嘗試創建一個帶有左側邊欄和主要內容區域的簡單儀表板。 這兩個區域都將包含獨特的自定義組件,這些組件需要可拖動,並且可以在其包含的區域內重新排序並轉移到另一個區域。
例如。 側邊欄包含Comp
和Comp1
,然后我可以在該區域內重新排序它們並將它們轉移到主要內容區域。
據我了解 Angular Material CDK Drag & Drop 僅適用於列表。 此外,列表中的項目必須具有相似的類型才能重新排序/轉移。
有沒有辦法將CDKDrag
和CDKDropList
用於 static 項目而不是數組中的項目? 我無法將自定義組件重新排序或轉移到不同的下拉列表。
我創建了一個示例項目: https://stackblitz.com/edit/ng-mat-dnd演示: https://ng-mat-dnd.stackblitz.io/
app.component.html
<div class="example-container">
<h2>Sidebar</h2>
<div cdkDropList #sidebarList="cdkDropList" [cdkDropListData]="sidebar" cdkDropListConnectedTo="[mainList]"
class="example-list" (cdkDropListDropped)="drop($event)">
<div class="example-box" cdkDrag>
<app-demo-comp-2 [btn]=2></app-demo-comp-2>
</div>
<div class="example-box" cdkDrag>
<app-demo-comp [ddn]=2></app-demo-comp>
</div>
<div class="example-box" cdkDrag>
<app-demo-comp-3 [txt]=3></app-demo-comp-3>
</div>
</div>
</div>
<div class="example-container">
<h2>Main</h2>
<div cdkDropList #mainList="cdkDropList" [cdkDropListData]="main" cdkDropListConnectedTo="[sidebarList]"
class="example-list" (cdkDropListDropped)="drop($event)">
<div class="example-box" cdkDrag>
<app-demo-comp [ddn]=1></app-demo-comp>
</div>
<div class="example-box" cdkDrag>
<app-demo-comp-2 [btn]=3></app-demo-comp-2>
</div>
</div>
</div>
app.component.ts
import { Component, OnInit, ViewChildren, QueryList } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem, CdkDrag } from '@angular/cdk/drag-drop';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
sidebar;
main;
@ViewChildren(CdkDrag) draggables: QueryList<CdkDrag>;
constructor() { }
ngOnInit() { }
ngAfterViewInit() {
console.log(this);
this.sidebar = [this.draggables.toArray()[0], this.draggables.toArray()[1], this.draggables.toArray()[2]];
console.log(this.sidebar);
this.main = [this.draggables.toArray()[4], this.draggables.toArray()[3]];
console.log(this.main);
}
drop(event: CdkDragDrop<any[]>) {
console.log(event);
if (event.previousContainer === event.container) {
console.log('Same container');
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
console.log('Different containers');
transferArrayItem(event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
}
}
}
Angular Material cdk 拖放功能在恢復元素的可見性並將其插入DOM 中的舊 position 時的工作方式。
維護 position很重要,因為它們在ngFor
指令上進行中繼,並且在 DOM 中移動元素可以甩掉NgFor
,后者僅在必要時進行智能差異和重新創建元素。
這意味着如果你想讓它在沒有 ngFor 的情況下工作,那么你必須自己移動 html 元素。
這是如何完成的示例:
drop(event: CdkDragDrop<any[]>) {
const nodeToMove = event.item.element.nativeElement;
const { previousContainer, container, previousIndex, currentIndex } = event;
console.log(this.sidebar, this.main);
if (previousContainer === container) {
moveItemInArray(container.data, previousIndex, currentIndex);
moveWithinContainer(
container.element.nativeElement,
previousIndex,
currentIndex
);
} else {
transferArrayItem(
previousContainer.data,
container.data,
previousIndex,
currentIndex
);
transferNodeToContainer(
nodeToMove,
container.element.nativeElement,
currentIndex
);
Promise.resolve().then(() => {
previousContainer.removeItem(event.item);
event.item.dropContainer = container;
event.item._dragRef._withDropContainer(container._dropListRef);
container.addItem(event.item);
});
}
}
...
function moveWithinContainer(container, fromIndex, toIndex) {
if (fromIndex === toIndex) {
return;
}
const nodeToMove = container.children[fromIndex];
const targetNode = container.children[toIndex];
if (fromIndex < toIndex) {
targetNode.parentNode.insertBefore(nodeToMove, targetNode.nextSibling);
} else {
targetNode.parentNode.insertBefore(nodeToMove, targetNode);
}
}
function transferNodeToContainer(node, container, toIndex) {
if (toIndex === container.children.length) {
container.appendChild(node);
} else {
const targetItem = container.children[toIndex];
targetItem.parentNode.insertBefore(node, targetItem);
}
}
您可能已經注意到,上面的解決方案有點笨拙,並且可能會根據庫版本而被破壞。
您可以做的是改用 ngFor 指令:
ts
sidebar = [0, 1, 2];
main = [0, 1];
html
<div *ngFor="let item of sidebar" class="example-box" cdkDrag>
<app-demo-comp-2 *ngIf="item === 0" [btn]=2></app-demo-comp-2>
<app-demo-comp *ngIf="item === 1" [ddn]=2></app-demo-comp>
<app-demo-comp-3 *ngIf="item === 2" [txt]=3></app-demo-comp-3>
</div>
...
<div *ngFor="let item of main" class="example-box" cdkDrag>
<app-demo-comp *ngIf="item === 0" [ddn]=1></app-demo-comp>
<app-demo-comp-2 *ngIf="item === 1" [btn]=3></app-demo-comp-2>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.