Ng2 Dragula 重新排序相同的数组多个放置区域

Posted 2023-05-09

【中文标题】Ng2 Dragula 重新排序相同的数组多个放置区域

【英文标题】：Ng2 Dragula reorder same array multiple drop zones

【发布时间】：2020-12-02 10:15:47

【问题描述】：

我从高处到低处都搜索过了，结果都干了。 Angular 9.1.11 版，ng2-dragula 2.1.1 版。我想将同一个数组绑定到多个放置区，并且在放置时应该正确地重新排序数组。这与 Dragula 1.3.1 版完美配合，但不适用于 2.1.1 版。这是我的代码：

<div class="row">
        <div class="colWidth()" dragula="playlist-items" [(dragulaModel)]="playlistService.playlist.contentItems">
            <div *ngFor="let contentItem of playlistService.playlist.contentItems; let i = index" class="container-fluid">
                <p-playlist-item *ngIf="i < 10"
                                [contentItem]="contentItem"
                                [index]="i">        
                </p-playlist-item>
            </div>
        </div>

        <div *ngIf="playlistService.playlist.contentItems.length > 10" class="colWidth()" dragula="playlist-items" [(dragulaModel)]="playlistService.playlist.contentItems">
            <div *ngFor="let contentItem of playlistService.playlist.contentItems; let i = index" class="container-fluid">
                <p-playlist-item *ngIf="i > 9 && i < 20"
                                [contentItem]="contentItem"
                                [index]="i">        
                </p-playlist-item>
            </div>
        </div>
</div>

在dragulaService.dropModel('playlist-items') 回调中，当拖入另一列时，该项从sourceModel中移除并插入到targetModel中。我尝试将它从目标模型中拼接出来，但视图仍然没有正确排序。我也尝试过使用单向绑定语法 [dragula]="playlistService.playlist.contentItems"。同样，完全相同的功能适用于 Dragula 版本 1.3.1，所以我只是对最新版本不走运吗？任何帮助将不胜感激！

【参考方案1】：

当然，在我提出问题后，我就想出了一个解决方案。我只是使用 column-count css 属性，并根据播放列表的长度动态更新类，同时只绑定一次数组。

<div class="columnCount()" dragula="playlist-items" [(dragulaModel)]="playlistService.playlist.contentItems">
    <p-playlist-item *ngFor="let contentItem of playlistService.playlist.contentItems; let i = index"
                    [contentItem]="contentItem"
                    [index]="i">        
    </p-playlist-item>
</div>