javascript - cdkDragBoundary 不适用于封闭容器内的绝对拖动元素

Question

我有一个应该被拖到另一个 cdkDropList 容器中的列表

<div id="s._id" class="s-cell" *ngFor="let s of boys; index as i" (cdkDragEnded)="dragEnd(s, 
  $event)" cdkDrag>
  <div class="ex-student">
    <span class="stuName">{{s.name}}</span>
    <span class="idef">{{s.idef}}</span>
    <span class="tName">{{s.tName}}</span>
  </div>
</div>

当我拖动元素时，它应该遵循 cdkDragBoundary 限制，这些学生列表单元格将位于另一个放置的容器内的绝对位置

  <div class="group-container" style="flex: 1 1 80%" >
      <div class="group-holder" #groupContainer>
          <div *ngIf="groupArray.length > 0" cdkDropList cdkDragBoundary=".group-holder" 
                  (cdkDropListDropped)="dropStudent($event)">
            <div *ngFor="let group of groupArray">
                <div *ngIf="group.student as s" class="student-cell" style="position: 
                  absolute;" [ngStyle]="{'left': group.startX+'px', 'top': group.startY+'px'}" 
                    (cdkDragEnded)="dragEnd(s, $event)" cdkDrag>
                    <mat-icon style="position: absolute; z-index: 1; font-size: 14px;font- 
                      weight:600;left: 115px;top: 0;cursor: pointer;" 
                      (click)="onClickClose(s)">close</mat-icon>
                    <div [id]="s._id" class="students" style="position: absolute;" 
                       [ngStyle]="s.useStyle(false)">
                       <span class="stuName">{{s.name}}</span>
                       <span class="idef">{{s.idef}}</span>
                       <span class="tName">{{s.tName}}</span>
                    </div>
                </div>
            </div>
         </div>
      </div>
  </div>

当我在拖动结束后拖动男孩的 s-cell 列表时，我将它们存储在 groupArray 中，它正在创建另一个动态的学生列表。在上面的代码中，cdkDragBoundary=".group-holder"这假设停止将动态单元格拖到容器边界之外，但它不能正常工作。我已经浏览了 cdk 文档。我想知道实现此功能的方法是横向还是使用当前代码。任何帮助都将不胜感激。

标签： javascriptangular