arraysangulardrag-and-dropevent-listenerng2-dragula

How to use Dragula's drop function as an event listener to update the order of an array


I am trying to update the order of an array of images when dragging and dropping using dragula with Angular. I've looked over the docs but am at loss and keep getting this error "Cannot invoke an expression whose type lacks a call signature. Type 'EventEmitter' has no compatible call signatures." When reading over the docs, there were mentions of the drake instance and I'm wondering if this is something I need to add in? Any help/advice is greatly appreciated.

Ultimately, I just want to fire off a save function (with the new array order) on the drop event. Seems like a simple easy thing, but I've been having a lot of trouble getting the drop event to work.

import { Component, OnInit, OnDestroy } from 
'@angular/core';
import { DragulaService } from 'ng2-dragula';
import { Subscription } from 'rxjs';

@Component({
selector: 'app-images',
templateUrl: './images.component.html',
styleUrls: ['./images.component.scss']
  })

export class ImagesComponent implements OnInit, OnDestroy {
subs = new Subscription();

constructor(
    private notifyService: NotifyService,
    private propertiesService: PropertiesService,
    private dragulaService: DragulaService
  ) { }
ngOnInit() {
this.subs.add(this.dragulaService.drop('images')
        .subscribe(({ name, el, target, source, sibling }) => {
            // fire a save function to update new array order
        })
    );
  }
ngOnDestroy() {
    // destroy all the subscriptions at once
    this.subs.unsubscribe();
  }
}

Solution

  • I think that drake is the easy way, but I think that you are doing it in a wrong way. So simple sample below:

    First of all you shold create a group, so in your constructor please add:

    this.dragulaService.createGroup('IMAGES', {});
    

    In next step pleas add this group into your HTML element container (parent for your items). In this example:

    <div class="images-container" dragula="IMAGES">
       <img src="a.png">
       <img src="b.png">
    </div>
    

    And finally you can use drake:

    this.dragula$.add(this.dragulaService.drop('IMAGES')
        .subscribe(({name, el, target, source, sibling}) => {
              // hire is your code
            })
        );
    

    This should work. If you have any problem please create StackBlitz demo for this - I will look on this.