我们如何在 ng-select 下拉菜单中集成 cdk Drag and Drop

Question

是否可以使用 cdk 拖放重新排列 ng-select 中的多个选择值。 您可以检查Stackblitz实施正在更改 model 值，但未反映在下拉列表中。 用户可以使用 cdk Drap and Drop 重新排列下拉列表中的多个选定值的方式。 HTML 用于 ng-select 与 cdk 拖放

<label>Drap and drop</label>
<ng-select cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="selectedLocations"
  [(ngModel)]="selectedLocations" [items]="Locations" [searchable]="true" bindLabel="name"  [multiple]="true"
  placeholder="Select Locations">
  <ng-template ng-label-tmp let-item="item" let-clear="clear">
    <div cdkDrag>
      <span
        class="ng-value-icon right"
        (click)="clear(item)">×
      </span>
      <span>{{item.name}}</span>
    </div>
  </ng-template>
</ng-select>
<p> {{selectedLocations|json}}</p>

是否可以将此功能与 ng-select 或任何其他建议一起使用以实现相同目的。

Answer 1

我能看到你实现这一目标的唯一方法是“混合”两个“结构”

一个是 cdkDropList，但水平方向，例如https://stackblitz.com/angular/eqqmymbjevo?file=src%2Fapp%2Fcdk-drag-drop-horizontal-sorting-example.ts

还有一个隐藏的下拉列表，当您单击 select 的 V 图标时显示。 对于下拉列表的每个项目，您附加一个（单击）事件，触发一个方法将其添加到 cdkDropList 源数组中，然后将其从下拉源列表中删除。

对于在 cdkDropList 源中添加的每个项目，附加一个方法以删除自身并将其添加回下拉列表...

这是一个不错的选择...可能需要一段时间，但会成功的