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

Question

我正在建立一个angularjs/firebase应用程序unsing angularfire绑定(v0.5.0).

我有一个项目列表,显示在一个表格ng-repeat中<tr>,如下所示:

<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(基本上是调用$("tbody").sortable())来设置拖放UI ,但我的问题是将它绑定到角度模型.有一个数量 的 问题就在于(与大jsfiddles),但在我的情况下angularfire 3双向绑定似乎搞乱它.

我想我需要在angularfire中使用firebase 优先级,orderByPriority并且可能在其中一个sortable回调中处理它,但是我很难弄清楚我应该怎么做...并且找不到任何关于它的文档.

有没有人做过类似的事情,你能否分享一些如何设置它的指针？

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