How can we integrate cdk Drag and Drop in ng-select dropdown

user_1176702 0
Viewed 734

Is it possible to rearrange the multiple selection values in ng-select using cdk Drag and drop. you can check Stackblitz Implementation is changing the model values but not reflected in the dropdown. what could be the way user can rearrange the multiple selected values from dropdown using cdk Drap and Drop. HTML for ng-select with cdk Drag drop

<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>

Image 1

Image 2

Is it possible to use this functionality with ng-select Or any other suggestions to achieve the same.

angular-cdk-drag-drop angular-ngselect angular
1 Answers

The only way I can see you achieving this is by "mixing" two "structures"

One will be a cdkDropList, but horizontal orientation, like this https://stackblitz.com/angular/eqqmymbjevo?file=src%2Fapp%2Fcdk-drag-drop-horizontal-sorting-example.ts

And a hidden dropdown list, shown when you click on the V icon of your select. For each item of your dropdown, you attach a (click) event, triggering a method to add it self on the cdkDropList source array, and remove it self from the dropdown source list.

For each item added on the cdkDropList source, attach a method to remove itself and added it back to the dropdown list...

Thats a good option... May take a while, but will do the trick

user_16916090
Related