Dragula:获取拖动项目的类和ID

Question

我已经看到了这一点，但是它在我的代码中不起作用。我在使用Angular2的Typescript中使用Dragula。

我需要获取拖累元素元素的ID。这是打字稿类的一部分：

 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);
  }

我知道el包含拖累元素，但是如何从typescript中的HTML元素中获取ID？

Answer 1

如果el是拖动元素，则其ID为el.id。这就是DOM的工作方式。如果您要拖动元素<div id="foo">something</div>，并且该元素在代码中分配给el，则el.id将为"foo"。

Answer 2

如果您的HTML元素是从对象模型派生的，则现在有一种使用Dragula v2.0获得ID的方法。

通过使用[(dragulaModel)]，您可以访问包括对象ID在内的整个对象模型。例如：

在html中：

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

然后，在您的角度服务中：

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

此方法最好的部分是，您可以访问带有value.item等拖动项目的所有属性。请参阅文档：https：//github.com/valor-software/ng2-dragula#special-events-for-ng2-dragula