Angular перетаскивание списков с помощью кнопок - PullRequest
Новая
       34

Angular перетаскивание списков с помощью кнопок

0 голосов
/ 15 марта 2020

Мне нужно разработать компонент angular для повторной сортировки объектов (перетаскивание из списка 1 «источник» в список 2 «цель»), и мне нужно, чтобы компонент имел кнопки.

У меня есть наблюдая за различными компонентами dnd, существующими на веб-сайте Angular Material , «сортировка с помощью перетаскивания» является хорошей основой для того, что я ищу. То, что я до сих пор скучаю, это кнопки, которые мы привыкли иметь в прежние времена (я знаю, старомодно, но это обязательные требования).

Запрошенные кнопки:

  1. & 3. Кнопки «вверх» и «вниз» рядом с список целей, чтобы переместить выбранный элемент вверх или вниз

Я знаю, это звучит странно, но это то, что они требуют, и мне нужно доставить. Я полагаю, что мог бы написать такой компонент с нуля, но было бы намного приятнее, если бы что-нибудь было.

Есть идеи?

1 Ответ

0 голосов
/ 15 марта 2020

Вы можете отредактировать HTML, который используется в примере (есть 1 root деление на массив, вы можете вставить 3-й делитель между ними, используя кнопки со значками материала) и использовать функцию transferArrayItem, чтобы передать элементы обратно и далее.

Какой-то псевдокод. Суть в следующем: * Получить ссылку на 2 контейнера, посмотреть API для правильного объекта. * Используйте ViewChild, чтобы получить доступ к нему в вашем файле TS. * Кликните по элементам, выберите их и сохраните их индекс в selectedLeft и selectedRight

 @ViewChild('left-container') leftContainer;
 @ViewChild('right-container') rightContainer;

 public selectedLeft: number;
 public selectedRight: number;

 moveRight() {
  transferArrayItem(this.leftContainer, this.rightContainer, this.selectedLeft, 0);
 }

Это должно переместить элемент с выбранным индексом в верхнюю часть списка справа.

...