Angular Dragula嵌套袋无法正常工作

Question

我将复杂对象嵌套为-

演示在这里-https://stackblitz.com/edit/ng2-dragula-base-qwvjyp

ts

tables = [
    { id: 0,
      name: "Bad Vamp",
      subitems: [
        { name: "one" },
        { name: "two" }
      ]
    },
    {
      id: 1,
      name: "Petrovitch the Slain",
      subitems: [
        { name: "three" },
        { name: "four" }
      ]
    }
  ];

html

<div class="flex" dragula="BAG" [(dragulaModel)]="tables">
  <table *ngFor="let table of tables"> 
    <tr>
      <td dragula="BAG" [(dragulaModel)]="table.subitems">
        <div class="vamp" *ngFor="let item of table.subitems">{{item.name}}</div>
      </td>
    </tr>
  </table>
</div> 

目标-我要实现的目的是要使表可以重新排序，并且td中的项目也必须重新排序。注意：TD可以具有另一个表，这就是为什么使用了相同的包名称BAG的原因。

问题-问题是-单元格td中的项目按预期工作，但未拖动表格。

1. 如果卸下内部BAGS，它可以正常工作。
2. 如果我通过单击表格边缘拖动来工作。但是，如果用户开始拖动单元格（td），它应该是可拖动的。