Question

我的Angular 9项目遇到问题，该项目的拖放功能不一致。每当我尝试将对象拖动到其目标位置时，放置操作都不会完成。大多数情况下，对象会返回到其原始位置，或者在我要将对象移动到的目标位置之前或之后移动到另一个位置。这是我的代码：

<div class="col-sm-12">

          <div cdkDropList class="example-list cdk-drop-list-receiving" (cdkDropListDropped)="drop($event)">
            <ng-container *ngFor="let word of Words; let i = index;">
                <div class="row" *ngIf="((i % 2) == 0)"  style="margin-right: 0px; margin-left: 0px;" >
                  <div class="col-sm-1 text-center" style="padding: 20px 10px; border: 1px solid black"> {{ i }}</div>
                  <div class="col-sm-5 text-center example-box"  style="border: 1px solid black" cdkDrag ><div class="example-custom-placeholder" *cdkDragPlaceholder></div>{{ Words[i].Title }}</div>
                  <div class="col-sm-1 text-center" style="padding: 20px 10px; border: 1px solid black"> {{ i+1 }}</div>
                  <div class="col-sm-5 text-center example-box" *ngIf="Words[i+1] !== undefined" style="border: 1px solid black" cdkDrag ><div class="example-custom-placeholder" *cdkDragPlaceholder></div>{{ Words[i+1].Title }}</div>
                </div>

            </ng-container>
          </div> 
        </div>

这是实时应用程序的链接，因此您可以直观地看到我所遇到的问题：[更新] https://stackblitz.com/edit/drag-and-drop-issue

提前谢谢

Answer 1

Cdk下拉列表可以垂直或水平工作。在您的代码索引被搞砸了。您真正需要的是一个CdkDropListGroup以使其双向运行。我已经为您的布局创建了相同的代码。我已经使同一数组的行为像同一cdkDropListGroup中的两个不同的cdkdroplist。

正在工作的Stackblitz：-https://stackblitz.com/edit/drag-and-drop-issue-gw4epd

HTML

shift_params.py

TS：-

init_path=None

CSS：-

train_tfs.txt

角度拖放-无法将项目拖放到目标位置

1 个答案: