Reorder items of an angularfire backed list, drag and drop style

Viewed 1256

I'm building an angularjs / firebase app unsing the angularfire bindings (v0.5.0).

I have a list of items, displayed in a table with ng-repeat on the <tr>, something like this:

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

and there's an angularfire 3 way data binding on this list of items, something like:

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

This works all fine, but now I'm trying to add the possibility to reorder the items with drag and drop.

I managed to setup the drag and dropping UI with jquery-ui (essentially calling $("tbody").sortable()), but my problem is to bind it to the angular models. There's a number of questions regarding that (with great jsfiddles) but in my case the angularfire 3 way binding seems to be messing it up.

I think I need to use firebase priorities with angularfire's orderByPriority and maybe deal with it in one of the sortable callbacks but I'm having trouble figuring out exactly how I should do that... and can't find any sort of documentation about it.

Has anyone done something similar, and could you share some pointers on how to set this up?

1 Answers
Related