Angular Sortable Directive
HTML
<script type="text/javascript" src="http://code.angularjs.org/1.0.2/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainCtrl">
<div ng-sortable="list">
<table class="sortableRow" ng-sortable-index="{{$index}}" ng-repeat="item in list | orderBy:'seq'">
<tr><td>{{item.text}}</td></tr>
</table>
</div>
<hr/>
<div ng-repeat="item in list">
{{item}}
</div>
</div>
</div>
CSS
.sortableRow {
padding:5px;
background-color:#ccc;
border:1px solid #000;
}
JavaScript
var app = angular.module('app', []);
app.directive("ngSortable", function(){
return {
link: function(scope, linkElement, attrs){
linkElement.sortable({
placeholder: "placeholder",
opacity: 0.8,
axis: "y",
update: function(event, ui) {
// get model
}
// notify angular of the change
scope.$apply();
}
});
}
};
});
function MainCtrl($scope){
$scope.list = [{text:"two", seq:2},
{text:"five", seq:5},
{text:"three", seq:3},
{text:"one", seq:1},
{text:"four", seq:4}];
}