PrimeNG 列表框：如何允许通过拖放重新排序项目？

Question

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

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

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

先感谢您！

Answer 1

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

1. let-index="index"在您的ng-template. 您需要索引，因为您必须以编程方式更新模型。
2. 在ng-template 的右下方声明pDraggable和pDroppable指令（使用相同的名称：在我的例子中是gens） 。<div>
3. 在同一行中div添加方法(onDragStart)和(onDrop)。将索引传递给这两个方法。
4. 最后定义一个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
}