Angular DragDrop - 如何重新排序项目答案

【问题标题】：Angular DragDrop - how to reorder itemsAngular DragDrop - 如何重新排序项目
【发布时间】：2015-01-06 13:32:32
【问题描述】：

情况：

我有一个应用程序，它利用 angular-dragdrop 在三个单独的列表之间移动项目。

拖放工作正常。但我还需要重新排序同一列表中的项目。

我在文档中看到也可以在 onDrop 上检索索引，但我不知道如何。如果我能够检索索引——即项目在新数组中的位置——那么我将能够进行重新排序

代码：

        <ul class="thumbnails">
          <li class="span3" style='margin-left:10px;'>
            <div class="thumbnail" data-drop="true" ng-model='list1' data-jqyoui-options="optionsList1" jqyoui-droppable="{multiple:true}">
              <div class="caption">
                <div class="btn btn-info btn-draggable" ng-repeat="item in list1" ng-show="item.title" data-drag="{{item.drag}}" data-jqyoui-options="{revert: 'invalid'}" ng-model="list1" jqyoui-draggable="{index: {{$index}}, animate:true, onStart:'set_item_id({board_item_id: item.item_id}, {index: $index})'}">{{item.title}}</div>
              </div>
            </div>
          </li>
          <li class="span3" style='margin-left:10px;'>
            <div class="thumbnail" data-drop="true" ng-model='list2' data-jqyoui-options="{accept:'.btn-draggable:not([ng-model=list2])'}"  jqyoui-droppable="{multiple:true}">
              <div class="caption">
                <div class="btn btn-info btn-draggable" ng-repeat="item in list2" ng-show="item.title" data-drag="{{item.drag}}" data-jqyoui-options="{revert: 'invalid'}" ng-model="list2" jqyoui-draggable="{index: {{$index}},animate:true, onStart:'set_item_id({board_item_id: item.item_id}, {index: $index})'}">{{item.title}}</div>
              </div>
            </div>
          </li>
          <li class="span3" style='margin-left:10px;'>
            <div class="thumbnail" data-drop="true" ng-model='list3' data-jqyoui-options="{accept:'.btn-draggable:not([ng-model=list3])'}"  jqyoui-droppable="{multiple:true}">
              <div class="caption">
                <div class="btn btn-info btn-draggable" ng-repeat="item in list3" ng-show="item.title" data-drag="{{item.drag}}" data-jqyoui-options="{revert: 'invalid'}" ng-model="list3" jqyoui-draggable="{index: {{$index}},animate:true, onStart:'set_item_id({board_item_id: item.item_id}, {index: $index})'}">{{item.title}}</div>
              </div>
            </div>
          </li>

        </ul>

盗贼：

http://plnkr.co/edit/YiAylkMCX9TAGyyhwO1m?p=preview

问题：

如何使用 angular-dragdrop 重新排序列表中的项目？

非常感谢！

【问题讨论】：

只需在 ng-repeat 中通过 id 使用 orderBy。像这样ng-repeat="item in list2 | orderBy:'item_id'"
感谢您的回复！假设我想根据字段“item_order”订购商品。要点是，如果我将项目放在新数组的位置 2 - 我想采用新的 $index 并分配为新的位置。唯一缺少的是如何占据新的 $index 位置
你能举个例子解释一下吗？我假设如果我将 list1 的 Item2 拖到 list2 的第 6 项下方，那么这些项目应该像 list2 的 Item2、item5 和 Item6 一样排序。这不是你想要的吗？
为了简单起见，我想在同一个列表中重新排序项目。将一个从下到上，抓取索引并保存为新位置。

标签： javascript angularjs drag-and-drop

【解决方案1】：

您需要添加额外的指令以确保在列表中启用排序选项。

data-drop="true" jqyoui-droppable="{index: {{$index}}}"

这是工作演示：http://plnkr.co/edit/N0z6ud?p=preview

【讨论】：