我需要从列表中拖动一个元素，然后将其放到角度为6的另一个块中

Question

我正在研究拖放功能(使用ng2 dragula(。

我需要从列表中拖动一个元素，然后将其放到另一个块中。但我遇到的问题是，我一次只需要在放置块中放置一个元素，如果我只从放置块中删除第一个添加的元素，那么我就可以添加另一个元素。有多个放置块。但列表块只是一个。

Answer 1

我创建了一个stackblitz 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);
})
);
}
}