How to change order of a drag and drop list in Angular Material with up or down buttons?

Question

How to change order of a drag and drop list in Angular Material with up or down buttons? So I want to move an item up or down.

template.html

<div cdkDropList class="dlist" (cdkDropListDropped)="drop($event)">
  <div class="category" cdkDrag *ngFor="let category of categories">

    <div class="orderer">
      <button class="up">Up</button>
      <button class="down">Down</button>
    </div>

  </div>
</div>

component.ts

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

Answer 1

You can call a standard function binded to event click of button like this:

component.ts

order(index:number,up: boolean) {

    if(up) // move up
    {
      if(index === 0) {
        console.log('do nothing')
      }
      else{
        const temp = this.movies[index-1];
        this.movies[index-1]=this.movies[index];
        this.movies[index]=temp;
      }
    }
    else{
      if(index == this.movies.length) {
        console.log('do nothing')
      }
      else {
         const temp = this.movies[index+1];
        this.movies[index+1]=this.movies[index];
        this.movies[index]=temp;
      }
      }
    }

component.html

<span style="padding:20px"></span>
<hr>
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let movie of movies; let i = index" cdkDrag>{{movie}}
    <div><button mat-fab (click)="order(i,true)">Up</button>
    <button mat-fab (click)="order(i,false)">Down</button></div>
  </div>
</div>

example here .

Answer 2

There is a solution If you want to swap in-place without temp variable:

 function moveItemInArray(categories, previousIndex, currentIndex){ categories = categories || [1,2,3,4,5,6]; // you wont here in your solution previousIndex = previousIndex || 1; // you wont here in your solution currentIndex = currentIndex || 2; // you wont here in your solution console.log(categories.toString()); categories[currentIndex] = categories[previousIndex] + (categories[previousIndex] = categories[currentIndex]) - categories[currentIndex]; console.log(categories.toString()); }

 <body onload="moveItemInArray()"></body>

How to change order of a drag and drop list in Angular Material with up or down buttons?

Question

2 answers

solution1
2 ACCPTED 2020-02-20 13:13:20

solution2
1 2020-02-20 14:08:48

How to change order of a drag and drop list in Angular Material with up or down buttons?

Question

2 answers

solution1 2 ACCPTED 2020-02-20 13:13:20

solution2 1 2020-02-20 14:08:48

solution1
2 ACCPTED 2020-02-20 13:13:20

solution2
1 2020-02-20 14:08:48