Ng2 Dragula reorder same array multiple drop zones

Question

I've searched high and low and have come up dry. Angular version 9.1.11, ng2-dragula version 2.1.1. I want to bind the same array to multiple drop zones, and on drop the array should simply be re-ordered correctly. This works beautifully with dragula version 1.3.1, but not version 2.1.1. Here's my code:

<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>

In the dragulaService.dropModel('playlist-items') callback, when dragging into another column, the item is removed from the sourceModel and inserted into the targetModel. I attempted splicing it out of the target model, but the view still does not order correctly. I've also tried using the one-way binding syntax, [dragula]="playlistService.playlist.contentItems". Again, exact same functionality works on dragula version 1.3.1, so am I just out of luck with the latest version? Any help would be much appreciated!

score 0 · Answer 1 · answered Aug 12 '20 at 18:30

Of course right after I ask the question I figure out a solution. I simply use the column-count css property, and update the class dynamically based on the length of the playlist, while just binding the array one time.

<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>

Ng2 Dragula reorder same array multiple drop zones

1 Answers1