SortableJS角2.0+バインディング：異なるコンポーネントの2つのリスト間でドラッグアンドドロップする

Question

ドラッグリストを一連のドラッグリストにするにはAngular bindings for SortableJSを使用しています。 &ドロップは、各リストがそれ自身のコンポーネントに含まれているときに動作する可能性はありますか？

視覚的なレベルでは、リスト内のアイテムを並べ替えることができます。ただし、リスト間で転送されたアイテムは、2番目のアイテムが転送されるまで表示されません（スクリーンショットの上部セクションの「リスト2」に「リスト1」から転送された最後のアイテムであるリストアイテム "2" 「リスト2」へ）。

もう1つの問題は、リストの内容にドラッグ&の変更が反映されないことです。「結果を見る」セクションのリストが上部セクションの表現とどのように一致しないかに注意してください。

親コンポーネント：

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() { } 

} 

Answer 1

をサポート私は現在、次のようなコードを持って

異なる構成要素内でadded to version 2.4.0でした。