重新排序 angularfire 支持列表的项目，拖放样式

Posted 2023-05-08

【中文标题】重新排序 angularfire 支持列表的项目，拖放样式

【英文标题】：Reorder items of an angularfire backed list, drag and drop style

【发布时间】：2014-01-18 11:43:15

【问题描述】：

我正在构建一个 angularjs / firebase 应用程序，取消 angularfire 绑定 (v0.5.0)。

我有一个项目列表，显示在<tr> 上带有ng-repeat 的表格中，如下所示：

<table>                               
    <tbody>                                                                
        <tr ng-repeat="(index, item) in items">
            <td>
                <input type="checkbox" ng-model="item.done">
            </td>              
            <td>                                                 
                <input type="text" ng-model="item.text" ng-focus="onItemFocus(index)" ng-blur="onItemBlur(index)">
            </td>                                                              
            <td>                                                               
                <button type="button" ng-click="remove(index)">&times;</button>
            </td>                                                              
        </tr>                                                                  
    </tbody>                                                               
</table>                                                                   

并且在这个项目列表上有一个 angularfire 3 路数据绑定，类似于：

$scope.ref = new Firebase('...');
$scope.remote = $firebase($scope.ref);
$scope.remote.$child("items").$bind($scope, "items"); 

这一切都很好，但现在我正在尝试添加通过拖放重新排序项目的可能性。

我设法使用 jquery-ui 设置拖放 UI（本质上调用 $("tbody").sortable()），但我的问题是将它绑定到角度模型。有一个 number of questions 与此相关（与 great jsfiddles），但在我的情况下，angularfire 3 方式绑定似乎搞砸了。

我认为我需要将firebase priorities 与 angularfire 的orderByPriority 一起使用，并且可能在sortable callbacks 之一中处理它，但我无法弄清楚我应该如何做到这一点......并且不能查找有关它的任何类型的文档。

有没有人做过类似的事情，你能分享一些关于如何设置的建议吗？

【问题讨论】：

请添加实现绑定的html以供参考。

@Kato 完成 :) （我去掉了一堆，但这应该是所有重要的东西）

【参考方案1】：

很久以前我在寻找相同的解决方案时看到了您的帖子。这是我整理的：

function onDropComplete(dropIndex, item) 
if (!item.isNew)
  var dragIndex = $scope.fireData.indexOf(item);
  item.priority = dropIndex;
  $scope.fireData.$save(dragIndex);
  if (dragIndex > dropIndex)
    while ($scope.fireData[dropIndex] && dropIndex !== dragIndex )
      $scope.fireData[dropIndex].priority = dropIndex+1;
      $scope.fireData.$save(dropIndex);
      dropIndex++;
    
   else if(dragIndex < dropIndex)
    while ($scope.fireData[dropIndex] && dropIndex !== dragIndex )
      $scope.fireData[dropIndex].priority = dropIndex-1;
      $scope.fireData.$save(dropIndex);
      dropIndex--;
    
  
 else if (item.isNew)
  item = angular.copy(item);
  item.isNew = false;
  item.priority = dropIndex;
  $scope.fireData.$add(item);
  while ($scope.fireData[dropIndex])
    $scope.fireData[dropIndex].priority = dropIndex+1;
    $scope.fireData.$save(dropIndex);
    dropIndex++;
  

在这里，我获取列表中已经存在的项目，并在放置时调整项目的优先级属性，具体取决于被拖动的项目是在放置区域上方还是下方。此外，如果将新拖动项目添加到列表中，它将添加到拖放的索引处，并且下面的所有项目都将被提升 1 优先级。这取决于让您的列表按var sync = $firebase(ref.orderByChild('priority')); 排序，并且您要使用ngDraggable。 以下是一些 HTML 示例：

<tr ng-repeat="obj in fireData" ng-drop="true" ng-drop-success="onDropComplete($index, $data,$event)">
    <td draggable="true" ng-drag="true" ng-drag-data="obj">
      <span class="glyphicon glyphicon-move"></span><div class="drag-name">obj.name</div>
    </td>
    <td>obj.name</td>
    <td>obj.type</td>
    <td><input type="checkbox" ng-change="saveChanges(obj)" ng-model="obj.completed"></td>
    <td>
      <div class="" ng-click="deleteItemFromList(obj)">
        <span class="glyphicon glyphicon-remove"></span>
      </div>
    </td>
  </tr>