使用ng2-dragula复制

Question

我希望我的源模型在拖走一个元素后保持不变。到目前为止，我所拥有的是: component.ts：

constructor(private dragulaService: DragulaService) {
    this.dragulaService.dropModel('DragItems').subscribe(dropItem => {
        this.text += dropItem.item.data;
    });
}

component.html：

<ul [dragula]="'DragItems'" [dragulaModel]="datas">
    <li *ngFor="let data of datas">
        <div class="list-item-class">
            {{data.value}}
        </div>
    </li>
</ul>

在我的目标字段中，我已经有了一些文本，并获得了被拖动项的值附加到现有文本的末尾，但被拖动项消失了。谢谢你的帮助!

Answer 1

您可以对tell Dragula that your item should be copied和not moved使用选项：

copyItem: <T>(item: T) => T

当您具备以下条件时：

• [(dragulaModel)]
• copy为true或返回true

的函数

..。ng2-dragula必须创建你所选择的JS对象的克隆。在以前的ng2-dragula版本中，有一个可怕的buggy，一刀切的克隆函数。从v2开始，您的必须提供您自己的copyItem函数。

如果您有一个没有嵌套值的简单对象，那么它可以像{ copy: ..., copyItem: (item: MyType) => ({ ...item }) }一样简单

这里有一个在demo page上使用Person类的完整示例。

Answer 2

诀窍是在调用this.dragulaService.dropModel(...之前，我必须设置复制选项：

this.dragulaService.find('DragItems').options.copy = true;
this.dragulaService.find('DragItems').options.copyItem = (item: any) => ({...item});