angular - ng2-Dragula 和 Angular5 - Copy 有效，copySortSource 不能可靠地工作

Question

我正在使用 Angular5 和 ng2-Dragula。我有两个名为“parameterBag”的 Dragula 容器（每个都在自己的组件中定义）。我可以在两个容器之间成功复制项目（如果它们不存在于目标中）。我原来的帖子说，

然而，我不能做的是在同一个容器中移动项目。

自从原始帖子以来，我发现了一个名为 copySortSource 的选项，如果将其设置为 true，则允许对复制源容器中的元素进行重新排序。我已经相应地更新了我的代码并删除了移动选项。现在我有时可以在容器内重新排序（移动）。有时物品在重新排序后会重复，有时其他物品会从容器中消失！

HTML 数据编辑器组件

<ul dragula="parameterBag" [(dragulaModel)]="items" id="dataEditor" style="list-style-type:none;">
    <li *ngFor="let item of items">
        {{item}}
    </li>
</ul>

data-editor.component.ts 构造函数

  constructor(private dragulaService: DragulaService, private patientService: PatientService) {
      this.subs.add(this.dragulaService.drop(PARAMETER_BAG)
        .subscribe(({ name, el, target, source, sibling }) => {
          console.log('drop');
          if (target && target.id === DATA_EDITOR) {
            this.editing.emit(true);
          }
        })
    );
}

数据编辑器.component.ts ngOnInit

  ngOnInit() {
    let group = this.dragulaService.find(PARAMETER_BAG);
    if (group === undefined) {
      this.dragulaService.createGroup(PARAMETER_BAG, {
        copySortSource: true,     
        copy: (el, source) => {
          return true;
        },

        copyItem: (parameter: String) => {
          // new to create a new copied item
          if (this.targetId === TEMPLATE_PARAMETERS) {
            let exists = this.templateData.some(p => (p === parameter));
            if (!exists) {
              return parameter;
            }
            return null; //prevent copy since parameter already exists
          }
          else {
            // only allow patient to accept if it doesn't already exist
            let exists = this.items.some(p => (p === parameter));
            if (!exists) {
              return parameter;
            }
            return null; //prevent copy since parameter already exists
          }
        },

        accepts: (el, target, source, sibling) => {
          this.targetId = target.id;
          return true;
        }
      });
    }

HTML 模板参数组件

  <ul dragula="parameterBag" [(dragulaModel)]="templateData" id="templateParameters" style="list-style-type:none;">
        <li *ngFor="let item of templateData">
          {{item}}
        </li>
  </ul>

标签： angularng2-dragula