1

我使用 ng2-dragula 开发了一个 angular5 应用程序。用户可以在其中将问题从问题容器拖放到 myfavourite-container。他可以拖动和更改 myfavourite-container 的排序顺序。它在我的应用程序中正常工作。我的用例是对使用 cntrl 键选择的多个项目进行排序。例如，如果我有一个 1,2,3,4,5 的列表，当我使用 ctrl 键选择 2,4 时，就像我们在 Windows 系统中选择文件并放到 1 的位置一样，那么结果列表就像2,4,1,3,5。我已经编写了代码来选择数组中的多个项目。所以我需要拖放多个项目并更改排序顺序。我的代码看起来像

app.component.html

 <table border=2>
  <tbody id ='dest' [dragula]='"second-bag"' [dragulaModel]="peoples">
    <tr *ngFor="let person of peoples" (click)="addThisPersonToArray(person, $event)" [class.active]="isPersonSelected(person)">
      <td>{{person.id}}</td>
      <td>{{person.firstName}}</td>
      <td>{{person.lastName}}</td>
    </tr>
  </tbody>
</table>

 Result items
<ul>
 <li *ngFor="let item of peoples"> {{item.firstName}}</li>
</ul>

app.component.ts

import { Component } from '@angular/core';
import { DragulaService } from 'ng2-dragula/ng2-dragula';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {


 selectedPersonArray = [];  
 peoples = [
  {
   id: 1,
   firstName: 'First Name 1',
   lastName: 'Last Name 1'
  },
 {
  id: 2,
  firstName: 'First Name 2',
  lastName: 'Last Name 2'
},
{
  id: 3,
  firstName: 'First Name 3',
  lastName: 'Last Name 3'
},
{
  id: 4,
  firstName: 'First Name 4',
  lastName: 'Last Name 4'
}, {
  id: 5,
  firstName: 'First Name 5',
  lastName: 'Last Name 5'
},
{
  id: 6,
  firstName: 'First Name 6',
  lastName: 'Last Name 6'
 }
];
toggleItemInArr(arr, item) {
const index = arr.indexOf(item);
index === - 1 ? arr.push(item) : arr.splice(index, 1);
}

addThisPersonToArray(person: any, event) {
if (!event.ctrlKey) {
  this.selectedPersonArray = [];
}

 this.toggleItemInArr(this.selectedPersonArray, person);
}

isPersonSelected(person: any) {
 return (this.selectedPersonArray.indexOf(person) !== -1);
}
}
4

0 回答 0