Very simple jquery-ui like sortable that does not require jquery-ui... Look further to see the features that are not implemented yet :)
I am trying to make the best sortable directive for Angular.js, your contribution is very welcome :)
I figured out that when we detect that the order should be updated, instead of proceeding to complex DOM manipulations, updating the referenced array would produce the same result, the "Angular" way (this is my personal opinion)...
bower install angular-sortable --saveSee example (index.html)
Options are defined as tag attributes:
HTML:
<ul ng-sortable="items"
ng-sortable-on-change="onItemsChange"
ng-sortable-on-dragstart="onItemsDragstart"
ng-sortable-on-dragend="onItemsDragend"
ng-sortable-on-drag="onItemsDrag">
<li ng-repeat="item in items" class="sortable-element" ng-style="{backgroundColor: item.color}">
{{item.name}}, {{item.profession}}
</li>
</ul>Controller
$scope.onItemsDrag = function(event) {
// Do whatever you want here...
console.log('onItemsDrag');
};
$scope.onItemsDragstart = function(event) {
// Do whatever you want here...
console.log('onItemsDragstart');
};
$scope.onItemsDragend = function(event) {
// Do whatever you want here...
console.log('onItemsDragend');
};
$scope.onItemsChange = function(fromIdx, toIdx) {
// Do whatever you want here...
console.log('onItemsChange');
};