使用 ng2-dragula 复制答案

【问题标题】：Copy with ng2-dragula使用 ng2-dragula 复制
【发布时间】：2019-11-05 12:13:42
【问题描述】：

我想让我的源模型在拖走一个元素后保持不变。这是我到目前为止所拥有的：组件.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>

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

【问题讨论】：

标签： angular drag-and-drop copy ng2-dragula

【解决方案1】：

您可以使用tell Dragula that your item should be copied的选项而不是移动：

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

当你有：

[(dragulaModel)]

copy 为 true 或 返回 true 的函数

... ng2-dragula 必须创建您选择的 JS 对象的克隆向上。在以前的ng2-dragula 版本中，有一个非常糟糕的错误，一刀切的克隆功能。从 v2 开始，您必须提供你自己的copyItem 函数。

如果你有一个没有嵌套值的简单对象，它可以是简单如： { copy: ..., copyItem: (item: MyType) => ({ ...item }) }

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

【讨论】：

【解决方案2】：

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

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

【讨论】：