当我在列之间拖动时，我怎么知道我的对象要去哪里

Question

dragula和我正面对一个问题，即如何知道对象通过ID或类似物体进行的列。

我确实有3列，但是当我在它们之间移动一个对象时，我得到了JSON信息，这些信息没有告诉我源列和目标列，我需要此信息来发送到后端并保存到数据库中。<<<<<<<<<<<<<<<</p>

下面的此代码是我试图在实际代码上进行的示例。

https://stackblitz.com/edit/angular-7k1bcq

第一个JSON是我在控制台中收到的示例

{name: "listagem", el: {…}, target: {…}, source: {…}…}
el: HTMLLIElement
item: Object
name: "listagem"
sibling: HTMLLIElement
source: HTMLUListElement
sourceIndex: 0
sourceModel: Array[1]
target: HTMLUListElement
targetIndex: 1
targetModel: Array[3]
__proto__: Object

我希望在发送到后端之前收到的第二个JSON。

{name: "listagem", el: {…}, target: {…}, source: {…}…}
el: HTMLLIElement
item: Object
name: "listagem"
sibling: HTMLLIElement
source: HTMLUListElement
sourceIndex: 0
sourceModel: Array[1]
target: HTMLUListElement
targetIndex: 1
targetModel: Array[3]
sourceColumn: 0
targetColumn: 1
__proto__: Object

SourceColumn和TargetColumn是我试图跟踪

Answer 1

最简单的方法是使用一个json并重新排列所有内容。最后，您可以从中获取所有信息。

但是，您当然可以使用Dragula服务来获取此数据。

您可以订阅.drag事件并从中获取有关source的信息。

        this.dragula$.add(this.dragulaService.drag('ITEMS')
            .subscribe(({name, el, source}) => {
                console.log(source); // information about source group
            })
        );

，要获取有关目标列的信息，您可以使用事件.drop：

        this.dragula$.add(this.dragulaService.drop('ITEMS')
            .subscribe(({name, target}) => {
                console.log('target', target);
            })
        );

要使用事件，您只需要创建新的Subscription，例如：this.dragula$ = new Subscription();和.add新订阅。

如果您需要更多信息，请随时提出。

编辑---

准备代码的一部分：

import { Component } from '@angular/core';
import { DragulaService } from 'ng2-dragula';
import {Subscription} from 'rxjs/internal/Subscription';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dragula$: Subscription;
  listas = [
    {
      nome: "Lista 1",
      id_lista: 1,
      itens: [
        { item: 'Lapis' },
        { item: 'Borracha' },
      ]
    },
    {
      nome: "Lista 2",
      id_lista: 2,
      itens: [
        { item: 'Maca' },
        { item: 'Banana' },
      ]
    },
    {
      nome: "Lista 3",
      id_lista: 3,
      itens: [
        { item: 'Doce' },
        { item: 'Chocolate' },
      ]
    }
  ];
  constructor(private dragulaService: DragulaService) {
    this.dragula$ = new Subscription();
    this.dragula$.add(this.dragulaService.drag('listagem')
      .subscribe(({name, el, source}) => {
        console.log('source', source.childNodes, source.parentElement.className);
       })
    );
    this.dragula$.add(this.dragulaService.drop('listagem')
      .subscribe(({name, target}) => {
          console.log('target', target);
      })
    );
  }

}