Как изменить порядок перетаскивания списка в Angular Материал с помощью кнопок вверх или вниз? - PullRequest
Новая
       0

Как изменить порядок перетаскивания списка в Angular Материал с помощью кнопок вверх или вниз?

1 голос
/ 20 февраля 2020

Как изменить порядок перетаскивания списка в Angular Материал с помощью кнопок вверх или вниз? Поэтому я хочу переместить элемент вверх или вниз.

шаблон. 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);
}

Ответы [ 2 ]

2 голосов
/ 20 февраля 2020

Есть решение, если вы хотите заменить без временной переменной: 

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>
2 голосов
/ 20 февраля 2020

Вы можете вызвать стандартную функцию, привязанную к событию, нажатию кнопки следующим образом:

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

компонент. 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>

пример здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...