Angular 中使用 Material 的可移动扩展面板

Question

我有一个对象数组

  listA  = [
  { name : "Pink Floyd", 
    sequence : 1,
    favSong : "Shine On You", 
    favMember :[
    {artist : "Nick Mason"}
  ]},
    { name : "Guns and Roses", 
    sequence  :2,
    favSong : "November Rain", 
    favMember :[
    {artist : "Slash"}
  ]},
    { name : "Led Zeppelin",
    sequence  :3,
    favSong : "Stairway To heaven", 
    favMember :[
    {artist : "Jimmy page"}
  ]},
]

我将它们显示为 UI 上的多个扩展面板。 我想添加一个功能，我可以在其中拖动单个扩展面板并更改显示名称的顺序。 我尝试使用 sortableJs，但我无法弄清楚。

这是HTML

<div>
    <strong>My favorite bands in order  : - </strong>
</div>
<hr />
<hr />



<div class="row mt-3">

            <div class="nomarLR mt-1 float-left col-12" *ngFor="let x of listA;let i =index">
                <mat-accordion multi="false" class="cus-accordion-style2 col-12" class="nomarLR nomarTB">
                    <mat-expansion-panel class="nomarLR nomarTB">
                        <mat-expansion-panel-header class="nomarLR nomarTB">
                            <mat-panel-title class="nomarLR nomarTB">
                                {{x.name}}
                            </mat-panel-title>
                        </mat-expansion-panel-header>
                        <div *ngFor="let y of listA">
                            <span *ngFor="let z of y.favMember"> {{z.artist}} </span>
                        </div>
                    </mat-expansion-panel>
                </mat-accordion>
            </div>

</div>

<!-- why is multi not working ??-->

有人可以帮我吗。 这是一个Stackblitz此外，当用户移动扩展面板时，它应该以更新的顺序将数组对象推送到不同的数组中。

Answer 1

• https://angular-qlpqhb.stackblitz.io
• https://stackblitz.com/edit/angular-qlpqhb?file=src/app/cdk-drag-drop-sorting-example.html

为拖放事件添加(cdkDropListDropped)="drop($event)"事件，并为要拖动的 dom 元素添加 cdkDrag

HTML：

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)"> // added html for drag and drop
  <div class="nomarLR mt-1 float-left col-12" *ngFor="let x of listA;let i =index" cdkDrag> // cdkDrag elements which are draggable.
                <mat-accordion multi="false" class="cus-accordion-style2 col-12"
                    class="nomarLR nomarTB">
                    <mat-expansion-panel class="nomarLR nomarTB">
                        <mat-expansion-panel-header class="nomarLR nomarTB">
                            <mat-panel-title class="nomarLR nomarTB">
                                {{x.name}}
              </mat-panel-title>
                        </mat-expansion-panel-header>
          <div *ngFor= "let y of listA">
            <span *ngFor="let z of y.favMember"> {{z.artist}} </span>
          </div>
                    </mat-expansion-panel>
                </mat-accordion>
        </div>
 </div>

TS

sortedArray = []


listA  = [
{ name : "Pink Floyd", 
favSong : "Shine On You", 
favMember :[
{artist : "Nick Mason"}
]},
{ name : "Guns and Roses", 
favSong : "November Rain", 
favMember :[
{artist : "Slash"}
]},
{ name : "Led Zeppelin", 
favSong : "Stairway To heaven", 
favMember :[
{artist : "Jimmy page"}
]},

drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.listA, event.previousIndex, event.currentIndex);
}