Markieren Sie den Zielcontainer in Dragula

Question

Ich benutze Dragula-Paket, um Drag-and-Drop in meinem Angular 2-Projekt zu implementieren. Es funktioniert gut. Sehr einfach zu verwendende Bündelung der Funktionalität.

https://github.com/valor-software/ng2-dragula

Aber ich möchte Zielbehälter markieren die Position des kommenden Tropfen zu betonen. Gibt es einen einfachen Weg, das zu tun? Ich weiß, dass JavaScript dafür Unterstützung bietet, also nahm ich an, dass es auch in Dragula verfügbar sein würde, aber ich habe es bisher noch nicht gefunden.

Answer 1

Es war so einfach, dass ich fast peinlich bin :)

Es ist nur eine Frage der bereitgestellten over and out Ereignisse verwenden. Das gewünschte Design wird in diesem Fall in meiner eigenen CSS-Klasse "possibleTargetContainer" definiert.

dragulaService.over.subscribe((value) => { this.onOver(value.slice(1)); }); 
dragulaService.out.subscribe((value) => { this.onOut(value.slice(1)); }); 

private onOver(args) { 
    let [el, target, source] = args; 
    target.classList.add("possibleTargetContainer"); 
} 

private onOut(args) { 
    let [el, target, source] = args; 
    target.classList.remove("possibleTargetContainer"); 
} 

Kudos wieder Dragula ist eine sehr schöne und einfache lib!