ng2-Dragula and Angular5 - Copy works, copySortSource does not work reliably

390 Views Asked by At

I'm using Angular5 and ng2-Dragula. I have two dragula containers named "parameterBag" (each defined in its own component). I can successfully copy items between the two containers (if they don't already exist in the target). My original post stated,

what I cannot do, however, is move items within the same container.

Since the original post I've discovered an option called copySortSource which if set to true allows elements in copy-source containers to be reordered. I've updated my code accordingly and removed the moves option. Now I can reorder (move) within a container some of the time. Sometimes the item gets duplicate after the reorder, sometimes, other items disappear from the container!

HTML dataEditor component

<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

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

data-editor.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 templateParameters component

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

There are 0 best solutions below