Get all the changes while debounceTime is active

Question

I am working on a drag&drop system. I had an issue with the d&d lib we've been using, solving that introduced a new one.

Old issue with my current solution

My new issue is that while debounceTime works as intended, if i drag more than one item while debounceTime is "active" only the last dragged item gets saved, how can i make sure that every action is saved but not by triggering an API call to our backend via every drop. -> because that's what coused my original old problem.

subs = new Subscription();
debouncer = new Subject();

constructor(private dragulaService: DragulaService, ) {
    this.makeUndragabbles();
    this.subs.add(this.dragulaService.dropModel('cardList')
      .subscribe(({ item, target }) => {
        const dragObj: DragObject = {
          item: item,
          stageId: target['id'],
          name: this.pipelineConfig.name
        };
        this.modifyStage(dragObj);
      }));
// freshly added solution to not trigger API call with every drop
    this.subs.add(this.debouncer.pipe(
      debounceTime(500))
      .subscribe((val) => this.drag.emit(val)));
  }

 private modifyStage(draggedItem) {
    this.debouncer.next(draggedItem);
  }

API call methods (in another component):

private saveDraggedItem(pipelineType: string, statusChangeDTO: StatusChangeDTO) {
    if (pipelineType === 'dealStages') {
      this.dealService.savePipelineDealStageUsingPOST(statusChangeDTO)
        .subscribe(res => { }
          , (err) => this.error.emit(err)
          , () => { this.getAllDealsForPipeline(); });
    }
  }

  drag(draggedItem: DragObject) {
    if (draggedItem.item) {
      const statusChange: StatusChangeDTO = {
        id: draggedItem.item.id,
        newStatusId: +draggedItem.stageId
      };
      this.saveDraggedItem(draggedItem.name, statusChange);
    }
  }