Assign additional values to drag-object

[dombre77]

Hello,

I use your mail-sorting example to achieve a runlist for placing pdf-pages on a print sheet. Via *ngFor I just generate multiple PAGE objects and multiple MAILBOXES as Dropzones as you can see on the Screenshot. At least I have problems to show up the origin of the dropped PAGE in the MAILBOX Container - just the PAGE hint shows up, unfortunately my other data like the filename and a pageindex are always undefined. I tried to add them to the trashes array like here:

bin-component.html

<div *ngIf="collected$|async as c" class="dustbin pad" [dropTarget]="trashTarget" [ngStyle]="getStyles(c)">
  <p>
    <b>
    {{ c.canDrop ? 'drop '+ c.itemType + ' in the' : '' }}
    {{ c.isOver && !hasCapacity ? 'cannot drop, ' : '' }}
    {{ name }}
    {{ hasCapacity ? '' : ' is full!' }}
    </b>
  </p>
  <p>
    <button (click)="empty()">leere {{ name }}</button>
  </p>
  <pre>{{ trashes | json }}</pre> //here
</div>

my TS (your bin-component.ts):

export class TemplateBinComponent implements OnInit, OnDestroy {

  @Input() name: string;
  @Input() filename: string;
  @Input() pageindex: number;
  @Input() accepts: string[] = ['TRASH'];
  trashes = [];
  capacity = 1;

  get hasCapacity() {
    return this.trashes.length < this.capacity;
  }

  trashTarget = this.dnd.dropTarget(null, {
    canDrop: (monitor) => {
      return this.hasCapacity;
    },
    drop: (monitor) => {
      // item is what we returned from beginDrag on the source
      const type = monitor.getItemType();
      const pageindex = this.pageindex;
      const filename = this.filename;
      this.trashes.unshift(type, pageindex, filename); //here
    }
  });

  collected$ = this.trashTarget.listen(m => ({
    isOver: m.isOver(),
    canDrop: m.canDrop(),
    itemType: m.getItemType()
  }));

  constructor(private dnd: SkyhookDndService) {
  }

  getStyles({ isOver, canDrop }) {
    return {
      backgroundColor: isOver && canDrop ? '#cfcffc' : canDrop ? '#fffacf' : 'white'
    };
  }

  empty() {
    this.trashes = [];
  }

  ngOnInit() {
    this.trashTarget.setTypes(this.accepts);
  }

  ngOnDestroy() {
    this.trashTarget.unsubscribe();
  }

}

I pass the filename and the page index to the component, in this way:
trash-pile-component.html

<ng-container *ngIf="collected$|async as c">
  <div [dragSource]="trashSource" [class.dragging]="c.isDragging && remain > 1">
    <app-template-trash
        [type]="type"
        [pageindex]="pageindex"
        [filename]="filename"
        [empty]="remain == 0 || c.isDragging && remain == 1"></app-template-trash>
  </div>
</ng-container>

trash-component.html

<div class="trash pad" [class.empty]="empty" [class.in-flight]="inFlight">
  <span class="type">{{ type }} {{ pageindex }} {{ filename }}</span>
</div>

Would be nice, If anybody gives me a hint - I´m new on TS.

THX Dom