I'm using dragula to develop my angular 5 drag and drop application. I am using a set of values which got from the server to generate the ng dragula contents. I'm using removeOnSpill to remove the unwanted array element. Removing from dragula content is working perfectly. But at the same time how can I remove the same element from my dynamic array?
<div class='drag-drop-wrapper' style="width: 100%" *ngIf="route.checkpoints.length>0">
<div class='drag-drop-container' [dragula]='"third-bag"' [dragulaOptions]="thirdOptions" >
<div #checkName *ngFor="let checkpoint of route.checkpoints" (click)="checkpointClick(checkpoint)">{{checkpoint.name}}</div>
</div>
</div>
My component code
dragulaServiceFunc(dragulaService) {
dragulaService.drag.subscribe((value: any) => {
this.onDrag(value.slice(1));
});
dragulaService.drop.subscribe((value: any) => {
this.onDrop(value.slice(1));
});
dragulaService.over.subscribe((value: any) => {
// console.log(`over: ${value[0]}`);
this.onOver(value.slice(1));
});
dragulaService.out.subscribe((value: any) => {
this.onOut(value.slice(1));
});
dragulaService.dropModel.subscribe((value: any) => {
this.onDropModel(value.slice(1));
});
dragulaService.removeModel.subscribe((value: any) => {
this.onRemoveModel(value.slice(1));
});
}
private hasClass(el: any, name: string): any {
return new RegExp('(?:^|\\s+)' + name + '(?:\\s+|$)').test(el.className);
}
private addClass(el: any, name: string): void {
if (!this.hasClass(el, name)) {
el.className = el.className ? [el.className, name].join(' ') : name;
}
}
private removeClass(el: any, name: string): void {
if (this.hasClass(el, name)) {
el.className = el.className.replace(new RegExp('(?:^|\\s+)' + name + '(?:\\s+|$)', 'g'), '');
}
}
private onDrag(args: any): void {
let [e] = args;
this.removeClass(e, 'ex-moved');
}
private onDrop(args: any): void {
let [e] = args;
this.addClass(e, 'ex-moved');
}
private onOver(args: any): void {
let [el] = args;
this.addClass(el, 'ex-over');
}
private onOut(args: any): void {
let [el] = args;
this.removeClass(el, 'ex-over');
//
// console.log(el);
// for (let checkpoint in this.checkpoints){
// if(this.checkpoints[checkpoint].name === el.innerHTML){
// this.checkpoints.splice(+checkpoint, 1);
// }
// }
//
// if(this.checkpoints.length ===0){
// this.checkpointAdded = false;
// }
}
private onDropModel(args: any): void {
console.log(args);
let [el, target, source] = args;
}
private onRemoveModel(args: any): void {
let [el, source] = args;
}
public thirdOptions: any = {
removeOnSpill: true,
};
I need to remove the element from my route.checkpoints array. Anyone help me out please