Мне нужно перетащить элемент из списка и поместить его в другой блок в угловых 6 - PullRequest
Новая
       23

Мне нужно перетащить элемент из списка и поместить его в другой блок в угловых 6

0 голосов
/ 26 ноября 2018

Я работаю над функцией перетаскивания (используя ng2-dragula ).

Мне нужно перетащить элемент из списка и поместить его в другие блоки.Но я застрял в том, что мне нужно отбрасывать только один элемент за раз, и если я удаляю только что добавленный элемент из только что удаленного блока, то я могу добавить еще один элемент.Есть несколько дроп-блоков.Но список блоков только один.

1 Ответ

0 голосов
/ 26 ноября 2018

Я создал URL-адрес стекаблика: я думаю, это то, что вы ищете ..

вы всегда можете отловить события в ng2-dragula следующим образом: 

import { Subscription } from 'rxjs';
import { DragulaService } from 'ng2-dragula';

export class MyComponent {
  // RxJS Subscription is an excellent API for managing many unsubscribe calls.
  // See note below about unsubscribing.
  subs = new Subscription();

  constructor(private dragulaService: DragulaService) {

    // These will get events limited to the VAMPIRES group.

    this.subs.add(this.dragulaService.drag("VAMPIRES")
      .subscribe(({ name, el, source }) => {
        // ...
      })
    );
    this.subs.add(this.dragulaService.drop("VAMPIRES")
      .subscribe(({ name, el, target, source, sibling }) => {
        // ...
      })
    );
    // some events have lots of properties, just pick the ones you need
    this.subs.add(this.dragulaService.dropModel("VAMPIRES")
      // WHOA
      // .subscribe(({ name, el, target, source, sibling, sourceModel, targetModel, item }) => {
      .subscribe(({ sourceModel, targetModel, item }) => {
        // ...
      })
    );

    // You can also get all events, not limited to a particular group
    this.subs.add(this.dragulaService.drop()
      .subscribe(({ name, el, target, source, sibling }) => {
        // ...
      })
    );
  }

  ngOnDestroy() {
    // destroy all the subscriptions at once
    this.subs.unsubscribe();
  }
}

https://stackblitz.com/edit/ng2-dragula-base-jystom?file=src%2Fapp%2Fapp.component.ts

Я использовал событие для манипулирования данными следующим образом: 

import { Component } from '@angular/core';
import { DragulaService } from 'ng2-dragula';
import { Subscription } from 'rxjs';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  // these are some basics to get you started -- modify as you see fit.
subs = new Subscription();
  vamps = [
    { name: "Bad Vamp" },
    { name: "Petrovitch the Slain" },
    { name: "Bob of the Everglades" },
    { name: "The Optimistic Reaper" }
  ];

  vamps2 = [
    { name: "Dracula" },

  ];

  constructor(private dragulaService: DragulaService) {
    // use these if you want

    this.dragulaService.createGroup("VAMPIRES", {
      // ...
    });

    this.dragulaService.dropModel("VAMPIRES").subscribe(args => {
      console.log(args);
    });
      this.subs.add(this.dragulaService.drop("VAMPIRES")
      .subscribe(({ name, el, target, source, sibling }) => {
        this.vamps2=[{name: el.textContent}]
        // ...
              console.log( "@@@@@@@@@@@@@",name, el.textContent, target, source, sibling);

      })
    );
  }
}
...