Ng2 Dragula对同一数组的多个放置区域进行重新排序

编程问答 2022-10-28

问题描述

我搜索过高低，已经干了。 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，所以我刚好没有最新版本吗？任何帮助将不胜感激！

解决方法

当然，在我问了问题之后，我便找到了解决方案。我只使用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>
angularangulardragulajavascriptng2-dragula