Javascript 角度拖放在单独的容器中列出项目

我使用指令来处理拖放操作。我填充与实际项目分开的组。当我将项目拖到ul元素上时出现问题，项目消失。是一个链接，你可以看到我的意思

下面是我的代码：

<ul ng-repeat="group in groups"
    class="groups"
    dnd-list="items">
  <li class="title">{{group.name}}</li>
</ul>

<ul class="items">
  <li class="item"
      ng-repeat="item in items"
      dnd-draggable="item"
      dnd-moved="items.splice($index, 1)"
      dnd-effect-allowed="move">
    {{item.name}}
  </li>
</ul>

{{group.name}



{{item.name}

文档中说，您需要在目标上设置一个dnd列表，并且您还需要自己呈现该列表：

---

顺便说一句，我要感谢你介绍我到这个伟大的图书馆

文档中说，您需要在目标上设置一个dnd列表，还需要自己呈现该列表：

---

顺便说一句，我要感谢你介绍我到这个伟大的图书馆

事实就是这样，谢谢你的回答！我不知道为什么（在本例中）组必须有项目，即使它们是空的，才能从其他列表“接收”项目。无论如何，再次感谢。事实就是这样，谢谢你的回答！我不知道为什么（在本例中）组必须有项目，即使它们是空的，才能从其他列表“接收”项目。无论如何，再次谢谢你。

<ul ng-repeat="group in groups" dnd-list="group.items" class="groups">
    <li class="title">{{group.name}}</li>
    <li ng-repeat="item in group.items">{{ item.name }}</li>
</ul>

$scope.groups = [
    {
        name : 'Group 1',
        items: []
    },
    {
        name : 'Group 2',
        items: []
    },
    {
        name : 'Group 3',
        items: []
    }
];