Question

我有一辆卡车在卡车里面，有很多货，里面有很多包裹

我面临在组件内部元素上拖放的问题

我需要将包裹从一个交付地点拖放到另一个要交付的包裹，我需要将交付从一个卡车拖放到另一个卡车...

问题是所有卡车的送货和包裹都是根据*ngFor的数据动态生成的

我尝试使用下面提供的以下代码以下是我的卡车，交货和包裹组件代码

<ul class="truck-item-list" 
    cdkDropList 
    id="truckList" 
    [cdkDropListData]="trucks"
    [cdkDropListConnectedTo]="[truckWorkList]"
    (cdkDropListDropped)="dragDropTruck($event)">
    <li cdkDrag class="truck-item" *ngFor="let truck of trucks">
        <div class="truck-item-content">
            {{ truck.TypeVehicle }} 
            #{{ truck.ID }} | 
            {{ truck.NumberDestinations }} Deliveries | 
            {{ truck.NumberPackages }} Packages | 
            {{ truck.Km }} Km | 
            ${{ truck.Cost }}
        </div>

        <div class="truck-item-delivery-name">
            <ul>
                <li *ngFor="let delivery of deliveries">
                    {{ delivery.DestinationTR1 }} {{ delivery.State }}
                </li>
            </ul>
        </div>

        <div class="main-truck">
            <app-deliveries></app-deliveries>
        </div>
    </li>
</ul>

<ul class="delivery-item-list" 
    cdkDropList cdkDropListOrientation="horizontal" 
    (cdkDropListDropped)="dragDropDelivery($event)">
    <li cdkDrag class="delivery-item" *ngFor="let delivery of deliveries">
        <div class="delivery-item-heading">
            <span class="delivery-item-name">{{ delivery.DestinationTR1 }} - {{ delivery.State }}</span>
            <span class="delivery-item-date">{{ delivery.Delivery }}</span>
        </div>
        <app-packages [delivery]="delivery"></app-packages>
    </li>
</ul>

dragDropDelivery(event: CdkDragDrop<string[]>) {
      moveItemInArray(this.deliveries, event.previousIndex, event.currentIndex);
}

<ul class="package-item-list" 
    cdkDropList 
    id="pack_{{ delivery.ID }}" 
    cdkDropListOrientation="horizontal" 
    (cdkDropListDropped)="dragDropPackage($event)"
    [cdkDropListConnectedTo]="packIds">
    <li cdkDrag class="package-item{{ package.Type == 'Urgent' ? ' urgent' : '' }}" *ngFor="let package of packages">
        <span class="package-item-id">Pack #{{ package.ID }}</span>
        <span class="package-item-type">{{ package.Type }}</span>
    </li>
</ul>

dragDropPackage(event: CdkDragDrop<string[]>) {
      moveItemInArray(this.packages, event.previousIndex, event.currentIndex);
}

动态生成或重复的相同组件中的角度拖放

0 个答案: