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


}

在列之间拖放时，如何知道对象的行进方向

1 个答案: