Angular Sortable Demo

by edwardsharp

HTML

<script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
<div ng-controller="SortableCTRL">
    <ul id="sortable">
        <li ng-repeat="item in sortableArray" ng-bind="item"></li>
    </ul>
    
    <button ng-click="add()">Add</button>
    <hr>
    <pre ng-bind="sortableArray|json"></pre>
</div>

CSS

li {
    padding: 5px;
    border: 1px solid #999;
    background: #eee;
    margin: 5px;
    cursor: move;
}

JavaScript

function SortableCTRL($scope) {
    var sortableEle;
    
    $scope.sortableArray = [
        'Zero', 'One', 'Two'
    ];
    
    $scope.add = function() {
        $scope.sortableArray.push('Item: '+$scope.sortableArray.length);
        
        sortableEle.refresh();
    }
    
    $scope.dragStart = function(e, ui) {
        ui.item.data('start', ui.item.index());
    }
    $scope.dragEnd = function(e, ui) {
        var start = ui.item.data('start'),
            end = ui.item.index();
        
        $scope.sortableArray.splice(end, 0, 
            $scope.sortableArray.splice(start, 1)[0]);
        
        $scope.$apply();
    }
        
    sortableEle = $('#sortable').sortable({
        start: $scope.dragStart,
        update: $scope.dragEnd
    });
}