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卡但是后来我不能移动例如第一张卡到最后一张卡，因为它总是设置倒数第二张。我尝试使用其他功能，但对我的英语很差，一无所获。

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

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

$ index我提出的List和$ index卡

并谢谢

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

我转移卡的$ index列表仍然存在问题，因为我不知道如何制作$ indexCard ...

请通过找到合适的功能帮我解决这个问题，或者知道如何将$ index child转移到dnd-drop函数。

编辑：

https://jsfiddle.net/qz19qw8t/

$ scope.lists = Array [Object，Object]

$ scope.lists [0] =对象{_id：＆＃34; 59c277ee0c002422e43ea49b＆＃34;，名称：＆＃34; 1＆＃34;，__ v：0，卡片：数组[5]，已创建：＆＃ 34; 2017-09-20T14：15：10.278Z＆＃34;，更新：＆＃34; 2017-09-20T14：15：10.278Z＆＃34; }

$ scope.lists [0] .cards [0] =对象{name：＆＃34; 1＆＃34;，position：0}

Answer 1

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

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

$ index是列表数组的索引，其中卡被删除，item是card对象，external是$ scope.lists 我在代码中留下了评论并进行了列表预览（列表结果）。

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

use directive在AngularJS中拖放

1 个答案: