Dragula: 得到 class 和拖拽物品的id

Question

我见过 this，但它在我的代码中不起作用。我在我的 Angular2 应用程序中使用 Dragula，Typescript。

我需要获取被拖动元素的元素id。这是打字稿的一部分 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);
  }

我知道 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>

然后，在您的 Angular 服务中：

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

Dragula: 得到 class 和拖拽物品的id

Dragula: get class and id of the dragged item

typescript

dragula