问题

Question

我正在建立一个新页面，如下图所示

在此操作组中，不应将其拖到其他三个组中（所有这些组均由div名称-operationArea给出）

问题

此处的拖动操作有效，但可以将其拖动到其他组件。问题在Stackblitz链接中重现：https://stackblitz.com/edit/angular-cyfknd 在此示例中，组件是不可移动的。

到目前为止我已经完成的步骤

开发了一个共享组件（用于单张卡视图）

<div class="operationArea orders-drop-down">
<div fxLayout="row" fxLayoutAlign="space-around center" class="drag_dropCard" 
*ngFor="let card of cardModel" cdkDragBoundary=".operationArea" (cdkDropListDropped)="drop($event)" cdkDrag>
      <mat-icon class="menu-icon" color="primary">{{card.icon}}</mat-icon>
      <span class="menu-title"> {{card.name}}</span>
      <mat-icon color="primary" (click)="editOperation(item)" class="c-pointer">edit</mat-icon>
      <mat-icon color="primary" (click)="deleteOperation(item)" class="c-pointer">delete</mat-icon>    
</div>
</div>

开发了另一个要大规模实施的组件：（提供了用于乘法的模型）

<div fxLayout="row" fxLayoutAlign="space-evenly start" style="height:90%;padding-top:.5em ">    
    <div>
        <drag-card-component [cardModel]='operationModel'>    
        </drag-card-component>
    </div>
    <div>
        <drag-card-component [cardModel]='actionModel'>    
        </drag-card-component>
    </div>
    <div>
        <drag-card-component [cardModel]='componentModel'>    
        </drag-card-component>      
    </div>
    <div>
        <drag-card-component [cardModel]='traceModel'>    
        </drag-card-component>        
    </div>
</div>

绑定：

 ngOnInit(): void {
    this.session.pageType = true; // for showing another icons in Moreoptions
    // initializing LUT
    this.orderTemplateFormGroup =  this.formBuilder.group({
        orderTemplate            :   ['', [Validators.required]],
     });

    this.operationModel =[
        {id: 1, name: 'Operation1', icon: 'settings', hasSub : false, parentId:0},
        {id: 2, name: 'Operation2', icon: 'settings', hasSub : false, parentId:0},
        {id: 3, name: 'Operation3', icon: 'settings', hasSub : false, parentId:0},
        {id: 4, name: 'Operation4', icon: 'settings', hasSub : false, parentId:0},
    ];
    this.actionModel =[
        {id: 1, name: 'Action1', icon: 'build', hasSub : false, parentId:0},
        {id: 2, name: 'Action2', icon: 'build', hasSub : false, parentId:0},
        {id: 3, name: 'Action3', icon: 'build', hasSub : false, parentId:0},
        {id: 4, name: 'Action4', icon: 'build', hasSub : false, parentId:0},
    ];
    this.componentModel =[
        {id: 1, name: 'component1', icon: 'settings', hasSub : false, parentId:0},
        {id: 2, name: 'component2', icon: 'settings', hasSub : false, parentId:0},
        {id: 3, name: 'component3', icon: 'settings', hasSub : false, parentId:0},
        {id: 4, name: 'component4', icon: 'settings', hasSub : false, parentId:0},
    ];
    this.traceModel =[
        {id: 1, name: 'trace1', icon: 'settings', hasSub : false, parentId:0},
        {id: 2, name: 'trace2', icon: 'settings', hasSub : false, parentId:0},
        {id: 3, name: 'trace3', icon: 'settings', hasSub : false, parentId:0},
        {id: 4, name: 'trace4', icon: 'settings', hasSub : false, parentId:0},
    ];
}

这样的文件夹排列

+app
  -page
    --newcomponents.ts
  -sharedmodule
    --hello
      ---card.ts
      ---hellocomponent.ts
    --sharedmodule.ts
  -app.module.ts
  -app.component.ts(functionality transfered to newcomponents.ts)

请解释一下，我想念什么？

Answer 1

Atlast在添加了@Will Alexander之后，根据@Will Alexander提供的见解获得了答案 cdkDropList 现在的代码是：

<mat-accordion  cdkDropList="cardModel" (cdkDropListDropped)="drop($event)">
            <mat-expansion-panel *ngFor="let card of cardModel"  cdkDrag  (click)="displayOperation(card)" >  
                 <mat-expansion-panel-header>  
                <mat-icon class="menu-icon" color="primary" style="width:5%">{{card.icon}}</mat-icon>
                <span class="menu-title" color="primary" style="width:63%; font-size: 12px;padding:.2em"> {{card.name}}</span>
                <span style="padding-left:.5em" style="width:30%">
                <mat-icon color="accent" (click)="editOperation()" value="edit"  class="c-pointer">edit</mat-icon>
                <mat-icon color="warn"   (click)="deleteOperation()" value="delete" class="c-pointer">delete</mat-icon> 
                </span>
                </mat-expansion-panel-header>

拖放：cdkDragHandle和cdkDrag不起作用

问题

到目前为止我已经完成的步骤

1 个答案: