在 AngularJS 中使用指令拖放

Question

我加入我的项目指令拖放：

https://github.com/marceljuenemann/angular-drag-and-drop-lists

我做到了：

 <div ng-repeat="list in lists">
    <div style="float: left; margin-left: 5px;">
      <div id="tasks">
        <h3>{{ list.name }} {{$index}}</h3>

        <ul 
              dnd-list="list.cards"  
              dnd-drop="drop($parent.$index, $index, list._id)" 
         >
          <li 
                ng-repeat="card in list.cards" 
                dnd-draggable="card"  
                dnd-dragstart="logEvent($parent.$index, $index, list._id)"
          >
            {{card.name}} 
          </li>
        </ul>

问题是当我设置时

 dnd-drop="drop($parent.$index, $index, list._id)" 

在 li 的标签中，这个 dnd-drop 功能停止工作。 如果她在标签 ul 中并且我在那里设置 ng-repeat 是工作我有 $parent.$index 和 $index 卡但后来我不能移动例如第一张卡到最后一张卡，因为它总是设置倒数第二张。我尝试使用其他功能，但我的英语很差，一无所获。

如果保持原样，我有感谢功能

dnd-dragstart="logEvent($parent.$index, $index, list._id)"

$index 列表和我提出的 $index 卡片

谢谢

dnd-drop="drop($parent.$index, $index, list._id)" 

我将卡转移到的$index列表仍然有问题，因为我不知道如何让$indexCard...

请帮助我找到合适的功能来解决这个问题，或者了解如何将 $index child 转移到 dnd-drop 功能。

编辑：

https://jsfiddle.net/qz19qw8t/

$scope.lists = 数组 [对象，对象]

$scope.lists[0] = Object { _id: "59c277ee0c002422e43ea49b", name: "1", __v: 0, cards: Array[5], created: "2017-09-20T14:15:10.278Z" ，更新：“2017-09-20T14:15:10.278Z”}

$scope.lists[0].cards[0] = 对象 { 名称：“1”，位置：0 }

Answer 1

编辑我新建了plunker 我只使用了 dropCallback 函数来检索有关丢弃项目及其丢弃位置的信息。

 dnd-drop="dropCallback($index, item, lists)"

$index 是删除卡片的列表数组的索引，item 是卡片对象，外部是 $scope.lists 我在代码中留下了 cmets 并进行了列表预览（列表结果）。

<ul >
    <li ng-repeat="item in lists">
       {{item.name}} 
       <ul style="min-height: 30px" dnd-list="item.cards" 
        dnd-drop="dropCallback($index, item, lists)"
        >
         <li ng-repeat ="card in item.cards"
            dnd-draggable="card"
            dnd-moved="item.cards.splice($index, 1)"
            dnd-selected="models.selected = item"
            ng-class="{'selected': models.selected === item}"
             dnd-effect-allowed="move">
          {{card.name}}</li>
       </ul>
    </li>
    </li>
</ul>

对于移动列表项，您需要指定 drop (drop-type) 和 dnd-allowed-types 除外的数据类型。其余的见 plunker。