如何让ngx-drag-drop适配PrimeNG？求代码修改方案

完全可以将ngx-drag-drop适配到PrimeNG框架，ngx-drag-drop的拖拽指令是通用的，不依赖Angular Material组件。下面提供两种适配方案，解决你遇到的组件替换和绑定问题：

方案一：使用PrimeNG基础列表组件（p-list） #

将原Angular Material的mat-list和mat-list-item替换为PrimeNG的p-list和列表项元素，保留所有ngx-drag-drop的拖拽指令即可：

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <pre>Fruits</pre>

      <p-list 
        (dndDrop)="onDrop($event, fruits)"
        class="dndList gap-1 flex-grow-1 d-flex flex-column bg-light rounded-1 shadow-sm"
        dndDropzone
        dndEffectAllowed="move">
        <li class="dndPlaceholder border rounded-1 bg-danger bg-gradient p-list-item" dndPlaceholderRef></li>
        <li 
          *ngFor="let fruit of fruits; let i = index; trackBy: trackByFruit"
          [dndDraggable]="fruit"
          [dndType]="fruit.type"
          (dndMoved)="onDragged(i, fruit, fruits)"
          class="border rounded-1 bg-white p-list-item"
          dndEffectAllowed="move">
          {{ fruit.type }} {{ fruit.id }}
        </li>
      </p-list>
    </div>

    <div class="col">
      <pre>Apples</pre>
      <p-list 
        [dndDropzone]="['apple']"
        (dndDrop)="onDrop($event, apples)"
        class="dndList gap-1 flex-grow-1 d-flex flex-column bg-light rounded-1 shadow-sm"
        dndEffectAllowed="move">
        <li class="dndPlaceholder border rounded-1 bg-success bg-gradient p-list-item" dndPlaceholderRef></li>
        <li 
          *ngFor="let apple of apples; let i = index; trackBy: trackByFruit"
          [dndDraggable]="apple"
          [dndType]="apple.type"
          (dndMoved)="onDragged(i, apple, apples)"
          class="border rounded-1 bg-white p-list-item"
          dndEffectAllowed="move">
          {{ apple.type }} {{ apple.id }}
        </li>
      </p-list>
    </div>

    <div class="col">
      <pre>Bananas</pre>
      <p-list 
        [dndDropzone]="['banana']"
        (dndDrop)="onDrop($event, bananas)"
        class="dndList gap-1 flex-grow-1 d-flex flex-column bg-light rounded-1 shadow-sm"
        dndEffectAllowed="move">
        <li class="dndPlaceholder border rounded-1 bg-warning bg-gradient p-list-item" dndPlaceholderRef></li>
        <li 
          *ngFor="let banana of bananas; let i = index; trackBy: trackByFruit"
          [dndDraggable]="banana"
          [dndType]="banana.type"
          (dndMoved)="onDragged(i, banana, bananas)"
          class="border rounded-1 bg-white p-list-item"
          dndEffectAllowed="move">
          {{ banana.type }} {{ banana.id }}
        </li>
      </p-list>
    </div>
  </div>
</div>

方案二：使用PrimeNG p-listbox（解决选项绑定问题） #

如果你需要使用带选择功能的p-listbox，需要通过自定义模板来添加拖拽指令，而不是直接依赖默认选项绑定：

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <pre>Fruits</pre>

      <p-listbox 
        [options]="fruits"
        (dndDrop)="onDrop($event, fruits)"
        class="dndList gap-1 flex-grow-1 bg-light rounded-1 shadow-sm"
        dndDropzone
        dndEffectAllowed="move">
        <ng-template pTemplate="item" let-fruit let-i="index">
          <div 
            [dndDraggable]="fruit"
            [dndType]="fruit.type"
            (dndMoved)="onDragged(i, fruit, fruits)"
            class="border rounded-1 bg-white p-2 mb-1"
            dndEffectAllowed="move">
            {{ fruit.type }} {{ fruit.id }}
          </div>
        </ng-template>
        <div class="dndPlaceholder border rounded-1 bg-danger bg-gradient p-2 mb-1" dndPlaceholderRef></div>
      </p-listbox>
    </div>

    <div class="col">
      <pre>Apples</pre>
      <p-listbox 
        [options]="apples"
        [dndDropzone]="['apple']"
        (dndDrop)="onDrop($event, apples)"
        class="dndList gap-1 flex-grow-1 bg-light rounded-1 shadow-sm"
        dndEffectAllowed="move">
        <ng-template pTemplate="item" let-apple let-i="index">
          <div 
            [dndDraggable]="apple"
            [dndType]="apple.type"
            (dndMoved)="onDragged(i, apple, apples)"
            class="border rounded-1 bg-white p-2 mb-1"
            dndEffectAllowed="move">
            {{ apple.type }} {{ apple.id }}
          </div>
        </ng-template>
        <div class="dndPlaceholder border rounded-1 bg-success bg-gradient p-2 mb-1" dndPlaceholderRef></div>
      </p-listbox>
    </div>

    <div class="col">
      <pre>Bananas</pre>
      <p-listbox 
        [options]="bananas"
        [dndDropzone]="['banana']"
        (dndDrop)="onDrop($event, bananas)"
        class="dndList gap-1 flex-grow-1 bg-light rounded-1 shadow-sm"
        dndEffectAllowed="move">
        <ng-template pTemplate="item" let-banana let-i="index">
          <div 
            [dndDraggable]="banana"
            [dndType]="banana.type"
            (dndMoved)="onDragged(i, banana, bananas)"
            class="border rounded-1 bg-white p-2 mb-1"
            dndEffectAllowed="move">
            {{ banana.type }} {{ banana.id }}
          </div>
        </ng-template>
        <div class="dndPlaceholder border rounded-1 bg-warning bg-gradient p-2 mb-1" dndPlaceholderRef></div>
      </p-listbox>
    </div>
  </div>
</div>

注意事项 #

• TypeScript部分的代码无需修改，原有的onDrop、onDragged、trackByFruit方法可以直接复用，因为ngx-drag-drop的事件逻辑与UI组件无关。
• 样式可以根据PrimeNG的组件结构调整，比如添加p-2、mb-1等PrimeNG通用样式类来适配布局。

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