Angular/2: ng2-dragula - Erstelle dynamische geschachtelte Elemente

Question

Ich versuche, einen dynamischen Baum mit ng2-Dragula zu implementieren. Ich verwende eine geordnete Liste für die Anzeige wie

<ol [dragula]='categories'> 
    <li> 
     Category One 
     <ol [dragula]='categories'> 
      <li> 
       Category 1.1 
      <li> 
      <li> 
       Category 1.2 
      <li> 
     </ol> 
    </li> 
    <li> 
     Category Two 
    </li> 
    <li> 
     Category Three 
    </li> 
<ol> 

Lösung funktioniert gut beim Ziehen nach oben/unten und nach links, aber ich kann nicht nach rechts zum Beispiel ziehen; Ich kann nicht "Kategorie 1.2" ziehen, um "Kategorie 1.1.1" zu erstellen.

Hoffe ich mache Sinn? Was ist der beste Weg, um ein verschachteltes "ol" -Element zu erstellen?

Vielen Dank

Answer 1

Dragula ist nicht mit Verschachtelung kompatibel, denn wenn Sie Drag & Drop auf einer äußeren Ebene eingestellt ist, können Sie Ihre Drag keine innere verschachtelten Ebene erreichen.

Eine mögliche Lösung für dieses Problem ist die Bereitstellung eines "Knopfes" oder eines ähnlichen Mechanismus zum Aktivieren und Ziehen dynamisch Hinzufügen und Entfernen von Dragula.

sobald Sie haben das Service

injiziert

constructor(private dragulaService: DragulaService) { 
    this.dragulaservice = dragulaService; 
} 

Zugabe möglich ist, wie unten

let drake = dragula({ 
       containers: [document.getElementById(elementId)] 
}); 
this.dragulaService.add("yourdynamicbagname", this.drake); 

und Sie es einfach durch Aufruf

this.dragulaService.destroy("yourdynamicbagname"); 

Sie dragula importieren müssen entfernen um den Drake eigenständig zu initialisieren.