Question

我在父组件中有两个 div 。以上两个div中的每个div中都有卡（在 div 中呈现的组件）。每张卡都有一个员工列表（也是 div ），我想从这些员工列表中拖动其父div中其他所有卡。

下图显示了我的页面外观：

我希望页面能够将员工拖放到Pickup或Drop内。例如：将Employee1从{Place1 To Place2}移到{Place3 To Place2}，但是我完全无法拖动任何内容。

以下是我的用于Pickup＆Drop div的父组件的html：

<div class="row">
    <div class="col-md-12">
        <h5 class="bg-primary text-white">Pickup</h5>
    </div>
</div>

<!-- Pickup DIV -->
<div class="row" cdkDropListGroup>
    <div class="col col-md-4" *ngFor="let item of pickupCabs" cdkDropList [cdkDropListData]="item.AssignedEmployees"
        (cdkDropListDropped)="onDrop($event)">
        <app-admin-special-request-allocation-card [allocatedCab]="item"
            (childevent)="onSpecialRequestReallocation($event)" cdkDrag>
        </app-admin-special-request-allocation-card>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <h5 class="bg-primary text-white">Drop</h5>
    </div>
</div>

<!-- Drop DIV -->
<div class="row" cdkDropListGroup>
    <div class="col col-md-4" *ngFor="let item of dropCabs" cdkDropList [cdkDropListData]="item.AssignedEmployees"
        (cdkDropListDropped)="onDrop($event)">
        <app-admin-special-request-allocation-card [allocatedCab]="item"
            (childevent)="onSpecialRequestReallocation($event)" cdkDrag>
        </app-admin-special-request-allocation-card>
    </div>
</div>

下面是我针对单个卡片/路线的html（app-admin-special-request-allocation-card.component.html）

<div class="card bg-light shadow p-3 mb-4 bg-white corners mt-2 mb-2">
    <div class="card-body text-center">
        <div [class.alert-danger]="!isAllocatedSuccess" [class.alert-success]="isAllocatedSuccess" class="alert"
            *ngIf="isAllocated">{{message}}</div>
        <div class="row">
            <div class="col text-right">
                <span><b>{{allocatedCab.AllocationStatusText}}</b></span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <i class='fas fa-{{allocatedCab.CabType|lowercase}}' style='font-size:30px;'></i>
                <br>
                <b>{{allocatedCab.Occupance}}/{{allocatedCab.Capacity}}</b>
                <p><b><span>{{allocatedCab.RouteType}}</span></b></p>
            </div>
            <div class="row">
                <p><b><span>{{allocatedCab.PickupPoint}} To {{allocatedCab.DropPoint}}</span></b></p>
            </div>
            <div class="row">
                <p style="text-align: left"><b><span>{{allocatedCab.VendorName}} -
                            {{allocatedCab.CabName}} - {{allocatedCab.RegNo}}</span></b></p>
            </div>

            <!-- employee list -->
            <div class="row" *ngFor="let employee of allocatedCab.AssignedEmployees">
                <p style="text-align: left"><span class="fa fa-user"></span>
                    <a href="./admin#" (click)="open(content,allocatedCab,employee)">
                        {{employee.FirstName}} {{employee.LastName}} -
                        <small> {{employee.PickupDate | date: "hh:mm a"}} </small>
                    </a>
                    <i style="color:red; cursor: pointer;" class="fa fa-remove"
                        (click)="openConfirmation(content1, employee)"></i></p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 pt-2 text-left ">
                <span>{{allocatedCab.PickupDate | date: "dd/MM/yyyy hh:mm a"}}</span>
            </div>
        </div>
    </div>
</div>

Answer 1

我认为您的代码有误。 cdkDropList 属性放在错误的div中。并且应将 cdkDrag 属性赋予可拖动的确切div。因此，仅在父div中提供 cdkDropListGroup 属性，并将 cdkDropList 属性放在卡片组件内。即。

您不需要 cdkDropList 属性以及父div（拾取和放置）中该元素中的以下代码。
相反，请将其添加到app-admin-special-request-allocation-card.component.html中，并将其添加到员工列表div上的新包装div中。
将 cdkDrag 属性添加到呈现员工姓名的确切div中。

尝试以下代码。

父组件

<div class="row">
  <div class="col-md-12">
  <h5 class="bg-primary text-white">Pickup</h5>
  </div>
</div>
<div class="row" cdkDropListGroup>
<!-- remove the 'cdkDropList' attribute and [cdkDropListData]=" from below div -->
  <div class="col col-md-4" *ngFor="let item of pickupCabs">
    <app-admin-special-request-allocation-card [allocatedCab]="item" (childevent)="onSpecialRequestReallocation($event)">
    </app-admin-special-request-allocation-card>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
  <h5 class="bg-primary text-white">Drop</h5>
  </div>
</div>
<div class="row" cdkDropListGroup>
<!-- remove the 'cdkDropList' attribute and [cdkDropListData]=" from below div -->
  <div class="col col-md-4" *ngFor="let item of dropCabs">
    <app-admin-special-request-allocation-card [allocatedCab]="item" (childevent)="onSpecialRequestReallocation($event)">
    </app-admin-special-request-allocation-card>
  </div>
</div>

卡组件

<div class="card bg-light shadow p-3 mb-4 bg-white corners mt-2 mb-2">
    <div class="card-body text-center">
        <div [class.alert-danger]="!isAllocatedSuccess" [class.alert-success]="isAllocatedSuccess" class="alert" *ngIf="isAllocated" >{{message}}</div>
    <div class="row">
            <div class="col text-right" >
                    <span><b>{{allocatedCab.AllocationStatusText}}</b></span>
            </div>
    </div>
    <div class="row">
            <div class="col-md-3">
                    <i class='fas fa-{{allocatedCab.CabType|lowercase}}' style='font-size:30px;'></i>
                    <br>
                    <b>{{allocatedCab.Occupance}}/{{allocatedCab.Capacity}}</b>
                    <p><b><span>{{allocatedCab.RouteType}}</span></b></p>
            </div>
            <!-- Add the cdkDropList attribute and drop list data here -->>
            <div class="col-md-9 border-bottom" cdkDropList [cdkDropListData]="allocatedCab.AssignedEmployees" (cdkDropListDropped)="drop($event)">
                    <div class="row">
                      <p><b><span>{{allocatedCab.PickupPoint}} To {{allocatedCab.DropPoint}}</span></b></p>
                    </div> 
                    <div class="row">
                        <p style="text-align: left"><b><span>{{allocatedCab.VendorName}} - {{allocatedCab.CabName}} - {{allocatedCab.RegNo}}</span></b></p>
                    </div>
                    <!-- Add cdkDrag attribute here -->>
                    <div class="row" *ngFor="let employee of allocatedCab.AssignedEmployees" cdkDrag>
                        <p style="text-align: left"><span class="fa fa-user"></span>
                        <a href="./admin#" (click)="open(content,allocatedCab,employee)">
                            {{employee.FirstName}} {{employee.LastName}} - 
                            <small> {{employee.PickupDate | date: "hh:mm a"}} </small>
                        </a>
                        <i style="color:red; cursor: pointer;" class="fa fa-remove" (click)="openConfirmation(content1, employee)"></i></p>
                    </div>
            </div>
     </div>  
     <div class="row">
            <div class="col-md-6 pt-2 text-left ">
                    <span>{{allocatedCab.PickupDate | date: "dd/MM/yyyy hh:mm a"}}</span> 
            </div>
      </div>
    </div>
</div>

并不一定要在同一组件中提供 cdkDropListGroup 和 cdkDropList 。当在浏览器中呈现以上代码时， cdkDropListGroup 和 cdkDropList 的结构将被设置为父子关系。因此，我希望您可以满足您的要求。

组内可拖放的多个列表

1 个答案: