Question

我使用ng2-dragula开发了angular5应用程序。用户可以将问题从问题容器拖放到myfavourite-container。他可以拖动并更改myfavourite-container的排序顺序。它在我的应用程序中正常工作。我的用例是使用cntrl-key按下来选择多个项目。例如，如果我有一个1,2,3,4,5的列表，当我选择2,4使用ctrl-key按下时，我们在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);
}
}

ng2-dragula对多个项目进行排序

0 个答案: