Angular/2 : ng2-dragula - Create dynamic nested elements

Question

I'm trying to implement a dynamic tree using ng2-dragula. I'm using an ordered list for display purposes such as

<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>

Solution works fine when dragging up/down and to the left but I cannot drag to the right for example; I cannot drag "Category 1.2" to create "Category 1.1.1".

Hope I am making sense? What is the best way to create a nested "ol" element?

Many thanks

Answer 1

Dragula is not compatible with nesting because if you set drag & drop on an outer level, your drag cannot reach an inner nested level.

One possible solution to this problem is to provide a 'button' or a similar mechanism to enable dragging and dynamically add and remove dragula.

once you have the service injected

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

adding is possible as below

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

and you can remove it by simply calling

 this.dragulaService.destroy("yourdynamicbagname");

You will need to import dragula separately to initialize the drake on your own.