如何在Angular ng-select中实现拖放

如何解决如何在Angular ng-select中实现拖放

如何在 ng-select 中实现拖放功能。我经历了许多 StackOverflow 答案，但没有一个对我有用。我还参考了一个较旧的 StackOverflow 答案，为此功能编写了代码，但仍然没有实现我的目标。有人可以帮助实现目标吗？

我的代码发生的情况是，当我拖动最后一个项目并将其放到第一个位置时，它不能正常工作，而是放到其他地方或其他项目受到干扰。

这是我的代码。 HTML

<div class="form-group row">
                <label for="Metals" class="col-sm-4 col-form-label">Metals* </label>
                <div class="col-sm-8">
                  <!-- <ng-select cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="selectedLocations" cdkDropListOrientation="horizontal" name="Metals" id="Metals" [items]="allMetals" bindLabel="commodityName" [(ngModel)]="formModel.actionNote.Metadata.commodityDef"
                      placeholder="Select Metals" #Metals="ngModel" [multiple]="true" [cloSEOnSelect]="false" [hideselected]="true" [maxSelectedItems]=15 required>
                  </ng-select>    -->
                 <ng-select cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="selectedLocations" cdkDropListOrientation="horizontal" name="Metals" id="Metals"
                  [(ngModel)]="formModel.actionNote.Metadata.commodityDef" [items]="allMetals" [searchable]="true" bindLabel="commodityName" [multiple]="true"
                  placeholder="Select Locations" [cloSEOnSelect]="false" [hideselected]="true" [maxSelectedItems]=15 #Metals="ngModel" required>

                  <ng-template ng-label-tmp let-item="item" let-clear="clear">
                    <div class="example-Box" cdkDrag [cdkDragData]="item">
                      <!-- <i class="material-icons" cdkDragHandle>
                        ##
                    </i> -->

                      <span class="ng-value-label">{{item.commodityName}}</span>
                      <span
                        class="ng-value-icon right"
                        (click)="clear(item)">×
                      </span>
                      <span *cdkDragPreview >{{item.commodityName}} </span>
                    </div>
                  </ng-template>
                  <!-- <ng-template ng-multi-label-tmp let-items="items" let-clear="clear">
                    <div class="ng-value-container" cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="selectedLocations"  >
                            <div cdkDrag [cdkDragData]="item" class="ng-value" *ngFor="let item of (items); 
                      let i = index">
                              <span class="ng-value-label">{{item.name }}</span>
                              <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
                            </div>
                            </div>
                    </ng-template> -->

                </ng-select>
                  <div [hidden]="Metals.valid || Metals.pristine" class="invalid-Feedback">
                    Metals are required
                  </div>   
                </div>
            </div>

TS：

    drop(event: CdkDragDrop<string[]>) {
    console.log(event);
    // moveItemInArray(this.formModel.actionNote.Metadata.commodityDef,event.prevIoUsIndex,event.currentIndex);
    // this.formModel.actionNote.Metadata.commodityDef = [...this.formModel.actionNote.Metadata.commodityDef];
    console.log(this.formModel.actionNote.Metadata.commodityDef);

  }

下面我附上了 ng-select 的屏幕截图，我想在其中应用拖放。

下面是最后一个项目掉到第一个位置后的另一个截图。最后一个项目没有转移到第一个，而是其他一些项目被转移了。如果将任何项目移动到任何地方，也会发生同样的事情。