Dragula多次拖放

时间:2019-10-13 23:24:40

标签: angular ionic-framework ionic4 dragula

我试图使容器“建筑物”在内部移动“地块”,而容器“地块”在内部也包含“地板”。我必须能够将“地块”拖放到“建筑物”中,并将“地板”移到“地块”中。在“地段”外面一定不能有“地板”。

这是我的数组:

this.buildings = [
            { id: 1, name: "building1", lots: [
                { id: 1, name: "lot1", building_id: 2, floors: [
                    { id: 1, name: "floor1", lot_id: 1 },
                    { id: 2, name: "floor2", lot_id: 1 },
                    { id: 3, name: "floor3", lot_id: 1 }] },
                { id: 2, name: "lot2", building_id: 1, floors: [
                    { id: 1, name: "floor1", lot_id: 2 },
                    { id: 2, name: "floor2", lot_id: 2 },
                    { id: 3, name: "floor3", lot_id: 2 }] }] },
            { id: 2, name: "building2", lots: [
                { id: 1, name: "lot1b", building_id: 2, floors: [
                    { id: 1, name: "floor1b", lot_id: 1 },
                    { id: 2, name: "floor2b", lot_id: 1 },
                    { id: 3, name: "floor3b", lot_id: 1 }] },
                { id: 2, name: "lot2b", building_id: 2, floors: [
                    { id: 1, name: "floor1b", lot_id: 2 },
                    { id: 2, name: "floor2b", lot_id: 2 },
                    { id: 3, name: "floor3b", lot_id: 2 }] }] }
        ]

这是我的HTML:

<ion-card *ngFor="let building of buildings">
                <ion-card-title>
                    {{building.name}}
                </ion-card-title>
                <ion-card-content [dragula]='"bag-one"' [(dragulaModel)]="building.lots">
                    <ion-card *ngFor="let lot of building.lots">
                        <ion-card-title>
                            {{lot.name}}
                        </ion-card-title>
                        <ion-card-content [dragula]='"bag"' [(dragulaModel)]="lot.floors">
                            <ion-card *ngFor="let floor of lot.floors">
                                <ion-card-title>
                                    {{floor.name}}
                                </ion-card-title>
                            </ion-card>
                        </ion-card-content>
                    </ion-card>
                </ion-card-content>
            </ion-card>

使用此代码,可以将“地块”移到“建筑物”中,但无法在“地块”内重新排列“地板”。

0 个答案:

没有答案