Как узнать, куда движется мой объект, когда я перетаскиваю между столбцами - PullRequest
Новая
       45

Как узнать, куда движется мой объект, когда я перетаскиваю между столбцами

0 голосов
/ 18 февраля 2019

dragula и я сталкиваюсь с проблемой, которая заключается в том, как узнать, по какому столбцу идет объект по идентификатору или что-то в этом роде.

У меня есть 3 столбца, но когда я перемещаю объект междуя получил информацию JSON, которая не сообщает мне исходный столбец и целевой столбец, мне нужно эту информацию отправить в серверную часть и сохранить в базе данных.

Этот код ниже является примером, который я пытаюсьсделать на моем реальном коде.

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 - это поля, которые я пытаюсь отследить

1 Ответ

0 голосов
/ 18 февраля 2019

Самый простой способ получить это - использовать один 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);
      })
    );
  }


}
...