Angular 15中ng-select2-component选中项拖拽排序需求求助

因为ng-select2-component本身没有内置拖拽排序功能，推荐使用Angular官方的@angular/cdk/drag-drop来实现，适配Angular 15且无需依赖jQuery，步骤如下：

1. 安装依赖 #

先安装对应版本的Angular CDK：

npm install @angular/cdk@15

2. 导入拖拽模块 #

在组件所属的NgModule中导入DragDropModule：

import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
  imports: [
    // 其他已导入模块
    DragDropModule
  ]
})
export class YourTargetModule { }

3. 自定义选中项模板，添加拖拽标记 #

默认选中项无法直接拖拽，需通过itemTemplate自定义渲染结构，用cdkDrag标记可拖拽元素，同时用cdkDropList包裹选中项容器并绑定拖拽结束事件：

<select2
  [multiple]="true"
  [data]="dropdownOptions"
  [(ngModel)]="selectedItems"
  [itemTemplate]="customSelectedItem"
  (ngModelChange)="syncFormArray($event)"
></select2>

<!-- 自定义选中项模板 -->
<ng-template #customSelectedItem let-item>
  <div cdkDrag class="selected-item">
    <span cdkDragHandle>{{ item.text }}</span>
    <span class="remove-btn" (click)="removeSelectedItem(item)">&times;</span>
  </div>
</ng-template>

<!-- 拖拽容器（需包裹select2的选中项父元素，可通过DOM定位调整） -->
<div cdkDropList (cdkDropListDropped)="onDrop($event)">
  <!-- select2的选中项会渲染到这里，需确保容器对应 -->
</div>

4. 处理拖拽与表单同步逻辑 #

在组件类中，用CDK提供的moveItemInArray工具函数同步选中值数组和表单数组的顺序：

import { Component } from '@angular/core';
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
import { moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
  // 组件元数据
})
export class YourComponent {
  dropdownOptions = [
    { id: 1, text: '选项A' },
    { id: 2, text: '选项B' },
    { id: 3, text: '选项C' }
  ];
  selectedItems: any[] = [];
  targetFormArray: FormArray;

  constructor(private fb: FormBuilder) {
    // 初始化表单数组，每个选中项对应一个FormGroup
    this.targetFormArray = this.fb.array([]);
  }

  // 拖拽结束时同步顺序
  onDrop(event: any) {
    // 更新选中值数组顺序
    moveItemInArray(this.selectedItems, event.previousIndex, event.currentIndex);
    // 同步表单数组内的FormGroup顺序
    moveItemInArray(this.targetFormArray.controls, event.previousIndex, event.currentIndex);
    // 触发表单状态更新
    this.targetFormArray.updateValueAndValidity();
  }

  // 选中项变化时初始化/更新表单数组
  syncFormArray(selected: any[]) {
    this.targetFormArray.clear();
    selected.forEach(item => {
      this.targetFormArray.push(this.fb.group({
        id: item.id,
        text: item.text
        // 其他需要绑定的表单字段
      }));
    });
  }

  // 移除选中项时同步表单数组
  removeSelectedItem(item: any) {
    const index = this.selectedItems.findIndex(v => v.id === item.id);
    if (index > -1) {
      this.selectedItems.splice(index, 1);
      this.targetFormArray.removeAt(index);
    }
  }
}

5. 基础样式优化（可选） #

添加样式提升拖拽体验：

.selected-item {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  margin: 0 6px 6px 0;
  background: #f0f0f0;
  border-radius: 4px;
  cursor: move;
}

.remove-btn {
  margin-left: 8px;
  cursor: pointer;
  color: #666;
}

.cdk-drag-preview {
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  border-radius: 4px;
}

.cdk-drag-animating {
  transition: transform 220ms cubic-bezier(0,0,0.2,1);
}

关键注意点 #

• 若ng-select2-component的选中项父容器无法直接添加cdkDropList，可通过浏览器开发者工具定位到选中项的DOM父元素，在模板中对应位置添加cdkDropList指令。
• 必须同时同步selectedItems和targetFormArray.controls的顺序，确保视图展示与表单数据完全一致。

内容的提问来源于stack exchange，提问作者ShadowProg