我目前正在使用 Angular 2 和来自 https://material.angular.io/cdk/drag-drop/overview 的拖放模块。我已经使拖放功能起作用了。我有两种不同类型的类对象,我希望将它们限制为它们自己类型的拖放列表。
这很可能通过对列表进行分组来解决,但由于我使用递归,出现了其他问题......
目前,我将每个列表都放在同一个组中,这意味着可以在每个列表中拖放任何内容(cdkDropListGroup,在执行递归部分之前位于组件中)。
我试图将列表限制为仅接受元素或属性(但不能同时接受两者),但我不知道如何执行此操作...
我有以下内容:
课程:
export class Attribute {
name: string;
type: string;
}
export class Element {
id: number;
name: string;
elements: Element[]
attributes: Attribute[];
}
HTML:
<div >
Elements
<div
cdkDropList
[cdkDropListData]="elements"
class="example-list"
(cdkDropListDropped)="drop($event)"
[cdkDropListEnterPredicate]="isElement">
<div type="button" text-align="right" class="btn btnNotInline" (click)="addNewElement()">
<img src="assets/img/IconPlus.png" class="elementListIcon"></div>
<div *ngFor="let element of elements" class="example-box" cdkDrag>
<mat-list>
<mat-list-item>
<mat-form-field appearance="standard dense" class="example-container">
<input matInput placeholder="{{element.name}}">
</mat-form-field>
</mat-list-item>
<mat-list-item>
<div
cdkDropList
[cdkDropListData]="attributes"
class="cdk-drag-list-attributes"
(cdkDropListDropped)="drop($event)"
[cdkDropListEnterPredicate]="isAttribute">
<div type="button" text-align="right" class="btn btnNotInline" (click)="addNewAttribute()">
<img src="assets/img/IconPlusPurple.png" class="elementListIcon"></div>
<div *ngFor="let attribute of attributes" class="example-container" cdkDrag>
<p class="mat-input-element-attribute">
<input matInput placeholder="{{attribute.name}}">
<input matInput placeholder="{{attribute.type}}">
</p>
</div>
</div>
</mat-list-item>
<mat-list-item>
<app-listboardelement [attributes]="element.attributes" [elements]="element.elements"></app-listboardelement>
</mat-list-item>
</mat-list>
</div>
ts。被调用的方法(属性看起来很相似)
isElement(drag : CdkDrag){
console.log("check " + (drag instanceof Element) + typeof drag + " , "+ typeof drag.data + ", "+ drag.data + " , " +(drag.data instanceof Element));
return (drag.data instanceof Element);
}
从输出中我简单地得到:“检查 false object , undefined, undefined , false” 由此我尝试将拖动的对象与类进行比较..但我没有任何运气。
有什么方法可以动态地将拖动的对象限制到某些列表吗?我知道 [cdkDropListConnectedTo] 但这给我带来了发生的递归和绑定的问题。任何指导将不胜感激
您始终可以检查拖放式“从起点到目的地”容器并采取相应的操作,例如:
drop(event: CdkDragDrop<string[]>) {
// same container (just reorder items)
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
// from first list to second list
if (event.previousContainer.id === 'cdk-drop-list-0' && event.container.id === 'cdk-drop-list-1') {
// do something
}
// from second list to first list
if (event.previousContainer.id === 'cdk-drop-list-1' && event.container.id === 'cdk-drop-list-0') {
// do something
}
}
}
希望这有帮助!
ts。被调用的方法(属性看起来很相似)
isElement(drag : CdkDrag){ console.log("check " + (drag instanceof Element) + typeof drag + " , "+ typeof drag.data + ", "+ drag.data + " , " +(drag.data instanceof Element)); return (drag.data instanceof Element); }
drag.data
不起作用,因为您没有通过 cdkDrag
将任何数据分配给您的
[cdkDragData]
<div *ngFor="let element of elements" class="example-box" cdkDrag [cdkDragData]="element">
...
</div>
对于您的问题...您可以为元素和属性创建两组
cdkDropList
数组,并使用 [cdkDropListConnectedTo]
绑定连接列表组,或者将所有列表连接到一个数组中,并允许使用 [cdkDropListEnterPredicate]="isElement"
进行删除你已经提到过。
要解决有关递归的问题,您需要执行一些额外的步骤并检查当前的放置容器是否正确。
我在有关嵌套的问题中有详细描述。