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

向上/向下和向左拖动时解决方案工作正常，但例如我不能向右拖动；我无法拖动“Category 1.2”来创建“Category 1.1.1”。

希望我说得通吗？创建嵌套“ol”元素的最佳方法是什么？

非常感谢

Answer 1

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 以自行初始化 drake。