PrimeNG Listbox：如何允许通过拖放重新排序项目？答案

【问题标题】：PrimeNG Listbox: How to allow re-ordering of items via drag and drop?PrimeNG Listbox：如何允许通过拖放重新排序项目？
【发布时间】：2020-10-12 13:43:16
【问题描述】：

标题说明了一切。我有一个listbox，我希望能够重新排序显示的项目通过拖放。当然，模型也应该更新。我知道我需要使用 pDraggable 和 pDroppable 指令，但到目前为止，我只设法使我的列表项“可拖动”，而无法将它们“拖放”到其他列表项的上方或下方。

此外，我不确定如何在用户放下物品后使用提供的事件来更新我的模型。最后，我想在每个项目的左侧都有一个图标，这应该是列表项中唯一可以“拖动”的部分（光标变成一只手）。

我没有附加任何代码，因为列表框制作起来非常简单。最后我使用的是 PrimeNG v9.0。

提前谢谢你！

【问题讨论】：

标签： angular drag-and-drop listbox primeng

【解决方案1】：

好的，我找到了。首先，已经有一个 PrimeNG 组件可以完成这项工作：OrderList。但是，此组件在列表的左侧或右侧添加按钮，并且这些按钮无法隐藏（这很愚蠢）。所以这里是如何用一个简单的Listbox来做到这一点：

在您的ng-template 中添加let-index="index" 代码。您需要索引，因为您必须以编程方式更新模型。
在 ng 模板正下方的 <div> 中声明 pDraggable 和 pDroppable 指令（使用相同的名称：在我的例子中是它的 gens）。
在同一个div 中添加方法(onDragStart) 和(onDrop)。将索引传递给这两种方法。
最后定义一个dragHandle（可选）。在我的情况下，拖动手柄是条形图标

HTML：

<p-listbox [options]="generals" [(ngModel)]="selectedGeneral" (onChange)="onChange($event.value)"
    [listStyle]="{'height':'282px'}" [style]="{ width: '235px', height: '100%' }">
    <ng-template let-general let-index="index" pTemplate="item">
        <div class="ui-helper-clearfix" pDraggable="gens" pDroppable="gens" dragHandle=".barsHandle" (onDragStart)="onDragStart(index)" (onDrop)="onDrop(index)">
            <i class="fa fa-bars barsHandle"></i>
            <img [src]="getGenIcon(general.value)" style="margin-right: 5px;">
            <span style="vertical-align: middle;">{{general.label}}</span>
        </div>
    </ng-template>
</p-listbox>

TS：

onDragStart(index: number) {
    this.startIndex = index;
}

onDrop(dropIndex: number) {
    const general = this.generals[this.startIndex]; // get element
    this.generals.splice(this.startIndex, 1);       // delete from old position
    this.generals.splice(dropIndex, 0, general);    // add to new position
}

【讨论】：

感谢分享。很棒的解决方案。