angular - Angular 2 - ng2-dragula

Question

<column *ngFor="let col of columns">
  ...
  <div [dragula]="'tickets-list'" [dragulaModel]="col.tickets">
    <ul>
      <li *ngFor="let ticket of col.tickets">
        {{ ticket }}
      </li>
    </ul>
  </div>
</column>

我的专栏很少。每列都包含带有门票的数组。如何检测移动的票证和位置？

Answer 1

将 id 添加到您的 Dragula Div。在你的情况下使用 col.id

步骤1

  <div  id={{col.id}}  [dragula]="'tickets-list'" [dragulaModel]="col.tickets">
        <ul>
          <li *ngFor="let ticket of col.tickets">
            {{ ticket }}
          </li>
        </ul>
      </div>

步骤 2 订阅 drop 事件。

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

onDrag(value) 函数上的第 3 步args 是el、目标、源、兄弟

value[1] ==> target.id value[2] ==> source.id 基于 id 你可以检测到在列之间移动的票