SortableJS Angular 2.0+ 绑定：在不同组件的两个列表之间拖放答案

【问题标题】：SortableJS Angular 2.0+ binding: Drag & drop between two lists in different componentsSortableJS Angular 2.0+ 绑定：在不同组件的两个列表之间拖放
【发布时间】：2017-12-10 17:04:07
【问题描述】：

我正在使用Angular bindings for SortableJS 来创建一系列拖放列表。当每个列表都包含在自己的组件中时，是否可以进行拖放？

在视觉层面上，我可以对列表中的项目进行重新排序。但是，列表之间转移的项目直到第二个项目转移后才会出现（请注意屏幕截图上部的“列表 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() { }

}

【问题讨论】：

标签： angular sortablejs

【解决方案1】：

支持在不同组件中包含的列表之间传输内容是added to version 2.4.0。

【讨论】：