SortableJS 각도 2.0+ 바인딩 : 다른 구성 요소의 두 목록간에 드래그 앤 드롭

Question

드래그 목록을 사용하려면 Angular bindings for SortableJS을 사용하고 있습니다. & 드롭을 각 구성 요소가 자체 구성 요소에 포함되어있을 때 드래그 할 수 있습니까?

시각적으로 목록에서 항목의 순서를 바꿀 수 있습니다. 그러나 목록간에 전송 된 항목은 두 번째 항목이 전송 될 때까지 표시되지 않습니다 (스크린 샷의 상단 섹션에있는 "목록 2"에 "목록 1"에서 전송 된 마지막 항목 인 목록 항목 "2"가 누락 된 것에주의하십시오) "목록 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() { } 

} 

Answer 1

지원을 포함

나는 현재 다음과 같은 코드가 있습니다 다른 구성 요소 내에서 added to version 2.4.0이었다.