Angular/2: ng2-dragula - Создание динамических вложенных элементов

Question

Я пытаюсь реализовать динамическое дерево, используя ng2-dragula. Я использую упорядоченный список для целей отображения, такие как

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

Решение отлично работает при перетаскивании вверх/вниз и влево, но я не могу перетащить вправо, например; Я не могу перетащить «Категория 1.2», чтобы создать «Категория 1.1.1».

Надеюсь, что у меня есть смысл? Каков наилучший способ создания вложенного элемента «ol»?

Большое спасибо

Answer 1

Dragula не совместим с вложенности, потому что если вы установите перетаскивать & падение на внешнем уровне, ваше сопротивление не может достичь внутреннего вложенного уровня.

Одним из возможных решений этой проблемы является предоставление «кнопки» или аналогичного механизма для включения перетаскивания и динамически добавить и удалить dragula.

когда у вас есть служба впрыскивается

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

добавление можно ниже

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

и вы можете удалить его с помощью простого вызова

this.dragulaService.destroy("yourdynamicbagname"); 

Вам нужно будет импортировать Dragula отдельно для инициализации дрейка самостоятельно.