0

一連のドラッグ アンド ドロップ リストを作成するために、SortableJSの Angular バインディングを使用しています。各リストが独自のコンポーネント内に含まれている場合、ドラッグ & ドロップは機能しますか?

視覚的なレベルでは、リスト内の項目を並べ替えることができます。ただし、リスト間で転送されたアイテムは、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() { }

}
4

1 に答える 1