I am using the Angular bindings for SortableJS in order to have a series of drag & drop lists. Is it possible for drag & drop to work when each list is contained within its own component?
On a visual level, I am able to reorder items within a list. However, items transferred between lists don't appear until a second item is transferred (notice how "list 2" in the upper section of the screenshot is missing the list item "2", which was the last item transferred from "list 1" to "list 2").
Another issue is that none of the changes made via drag & drop are reflected in the lists' contents--notice how the lists in the "See the result" section don't match their representations in the upper section.
I currently have code like the following:
Parent component:
import { Component, OnInit } from '@angular/core';
import { ItemsService } from '../items.service';
@Component({
selector: 'app-multi-list',
template: `
<h2>Drag / drop the item</h2>
<h3>list 1</h3>
<app-list [(items)]="itemsService.items1"></app-list>
<h3>list 2</h3>
<app-list [(items)]="itemsService.items2"></app-list>
<hr>
<h2>See the result</h2>
<div>
<h3>list 1</h3>
<div *ngFor="let item of itemsService.items1">{{ item }}</div>
<h3>list 2</h3>
<div *ngFor="let item of itemsService.items2">{{ item }}</div>
</div>
`,
styleUrls: ['./multi-list.component.css']
})
export class MultiListComponent implements OnInit {
constructor(public itemsService: ItemsService) { }
ngOnInit() { }
}
Child component that contains a sortable list:
import { Component, Input, OnInit } from '@angular/core';
import { SortablejsOptions } from 'angular-sortablejs';
@Component({
selector: 'app-list',
template: `
<div [sortablejs]="items" [sortablejsOptions]="{ group: 'test' }">
<div *ngFor="let item of items">{{ item }}</div>
</div>
`,
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
@Input() items: any[];
ngOnInit() { }
}
