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>