ng2 Dragula和Angular5-复制工作，copySortSource无法可靠工作

我用的是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>

  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;
        }
      });
    }

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

data-editor.component.ts ngOnInit

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

  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;
        }
      });
    }

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

HTML模板参数组件

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

  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;
        }
      });
    }

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

{{item}}

这是否意味着您想知道复制项目后源容器的顺序或目标容器的顺序。如果您能想出

stackblitz

示例。这样可以更好地帮助您。您可以订阅

dragModel

，以便在执行任何删除操作后了解源和目标容器顺序。我知道，我只想使用copySortSource属性。谢谢