Dragula: get class and id of the dragged item

Question

I have seen this, but it does not work in my code. I am using Dragula, in my Angular2 application with Typescript.

I need to get the id of the element of the draged element. Here is a part of the typescript class:

 constructor(private dragulaService: DragulaService) {

    dragulaService.drop.subscribe((value) => {
       this.onDrop(value.slice(1));
    });

  }


  private onDrop(args) {
    let [e, el] = args;
    console.log("on Drop");
    console.log(e);
    console.log(el);
  }

I know the el contains the draged element, but how can i get the id out of an html element in typescript?

Answer 1

If el is the dragged element, then its id is el.id. That's how the DOM works. If you are dragging an element <div id="foo">something</div> and this element is assigned to el in your code, then el.id will be "foo".

Answer 2

If your html element is derived from an object model, there's a now neater way to obtain the id with dragula v2.0.

By using [(dragulaModel)], you can access the entire object model, including your object's id. For example:

In the html:

<div [(dragulaModel)]="listOfItems">
   <div *ngFor="let item of listOfItems">
   </div>
</div>

Then, in your Angular service:

this.subs.add(
   dragulaService.dropModel().subscribe((value) => {
      // prints the item's id
      console.log(value.item.id);
   })
)

The best part of this method is you gain access to all the properties of the dragged item with value.item amongst others. See documentation: https://github.com/valor-software/ng2-dragula#special-events-for-ng2-dragula