bevacqua / dragula

:ok_hand: Drag and drop so simple it hurts
https://bevacqua.github.io/dragula/
MIT License
22.01k stars 1.97k forks source link

Support multi-select with CTRL / SHIFT #518

Open popey456963 opened 7 years ago

popey456963 commented 7 years ago

Would be a nice feature to have.

inv-senchuthomas commented 6 years ago

I have selected multiple items using ctrl key press

app.component.html

`<tbody id ='dest' [dragula]='"second-bag"' [dragulaModel]="peoples"> <tr *ngFor="let person of peoples" (click)="addThisPersonToArray(person, $event)" [class.active]="isPersonSelected(person)">

{{person.id}}
      <td>{{person.firstName}}</td>
      <td>{{person.lastName}}</td>
    </tr>
  </tbody>`

app.component.ts

`

 addThisPersonToArray(person: any, event) {
  if (!event.ctrlKey) {
   this.selectedPersonArray = [];
 }
 this.toggleItemInArr(this.selectedPersonArray, person);
 }
 isPersonSelected(person: any) {
    return (this.selectedPersonArray.indexOf(person) !== -1);
 }
 toggleItemInArr(arr, item) {
    const index = arr.indexOf(item);
    index === - 1 ? arr.push(item) : arr.splice(index, 1);
 }

`

style.css

td { padding: 5px; } .active { background: #369; color: #fff; }

qubiack commented 5 years ago

@inv-senchuthomas How you can drag & drop multiple items? I have ready selector, but when I drag them it always drag only one item...