我正在使用SortableJS 的 Angular 绑定，以便拥有一系列拖放列表。当每个列表都包含在自己的组件中时，拖放是否可以工作？
在视觉层面上，我能够对列表中的项目进行重新排序。但是，列表之间转移的项目直到第二个项目转移后才会出现（请注意屏幕截图上部的“列表 2”缺少列表项目“2”，这是从“列表 1”转移的最后一个项目到“列表 2”）。
另一个问题是，通过拖放所做的更改都没有反映在列表的内容中——请注意“查看结果”部分中的列表如何与它们在上部分中的表示不匹配。
我目前有如下代码：
父组件：
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() { }
}
包含可排序列表的子组件：
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() { }
}