CODEWITHSUNDEEP
angularangular6ng2-dragula
Akash Srivastav
Akash Srivastav

Reputation: 766

Ng2-Dragula - Prevent removal of element from list after drag

I have a list that I'm using to drag elements from, and drop into another one.

Is there a way to retain the dragged element in the source list after it has been dragged to the other list?

Precisely, I want the element to be present in both the lists after it has been dragged and dropped from one to the other.

How can I achieve this?

Upvotes: 0

Views: 1322

Answers (1)

Satish Gupta
Satish Gupta

Reputation: 46

You must provide a copyItem function if you're using copy with [dragulaModel].

<div class='container' dragula="PERSON" id="left" [(dragulaModel)]="left">
  <div *ngFor="let person of left">{{person | json}}</div>
</div>
<div class='container' dragula="PERSON" id="right" [(dragulaModel)]="right">
 <div *ngFor="let person of right">{{person | json}}</div>
</div>



let personId = 0;

class Person {
  id: number;
  constructor(public name: string) {
    this.id = personId++;
  }
}

export class CopyModelComponent {
  left = [
    new Person('Steven'),
    new Person('Paula'),
    new Person('Persephone'),
    new Person('Jacob'),
  ];
  right = [
    new Person('Delia'),
    new Person('Jackson'),
  ];

  constructor(private dragulaService: DragulaService) {
    dragulaService.createGroup('PERSON', {
      copy: (el, source) => {
        return source.id === 'left';
      },
      copyItem: (person: Person) => {
        return new Person(person.name);
      },
      accepts: (el, target, source, sibling) => {
        // To avoid dragging from right to left container
        return target.id !== 'left';
      }
    });
  }

}

You can find the doc and working example here

Upvotes: 1

Related Questions