Search code examples
angulardragulang2-dragula

ng2-dragula style original element when copying


We're using the copy: true setting with ng2-dragula:

constructor(private dragulaService: DragulaService) {
    dragulaService.setOptions('group-body-bag', {
        copy: true,
        copySortSource: true
    });
}

Now we want to fade out the original element (the one that is still sitting in the list while we are dragging) with something like opacity: 0.3. How can we do that? Using

dragulaService.cloned.subscribe((value) => {
    if (value && value.length && value.length === 4 && value[3] === 'copy') {
        this.onDragCopy(value[1]);
    }
});

we can find the original element and we could apply a transparancy to it, bit this seems awfully wrong: The draggable elements (naturally) come from a data-array, is there a way to find the dragged element's index so we can do something like

dragulaService.cloned.subscribe((index) => {
    this.draggedElement = index;
});

and

<li *ngFor="let article of articles; let i = index"
  [class.original-dragged-element]="draggedElement === i">

(I know, this is bad already, I should match article).


Solution

  • I have decided that the Angula way is to manipulate data and have a template render the classes.