使用材料的角度移动扩展面板

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上的多个扩展面板。我想添加一个功能，我可以在其中拖动单个扩展面板并更改名称的显示顺序。我尝试使用可排序的Js，但我无法弄清楚。

这是网页

<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 ??-->

有人可以帮我吗？这是堆栈闪电战 此外，当用户移动扩展面板时，它应该使用更新的顺序将数组对象推到不同的数组中。

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);
}