This is a demonstration of how to modify the ngRepeat directive from angular.js to accept drag and drop. This example is limited to vertical movements only.
http://sdevgame.wordpress.com/2013/08/27/angularjs-drag-n-drop-re-order-in-ngrepeat/
This now has a new home at http://github.com/SimeonC/ngRepeatReorder
Forked from SimeonC's Pen AngularJS ngRepeat Drag n Drop.
A Pen by Captain Anonymous on CodePen.
| <div class="container" ng-app="dragndropdemo"> | |
| <div class="row" ng-controller="dragndropdemo"> | |
| <div id="names" class="form-inline draggable-group" role="form"> | |
| <div class="form-group has-feedback transition" ng-repeat-reorder='name in names' ng-repeat-reorder-handle="i.fa.fa-bars"> | |
| <input class="form-control form-inline player" type='text' | |
| ng-change='checkForNameDelete($index)' | |
| ng-model='name.val' | |
| ng-class="{'last-player': $index == names.length-1}"> | |
| <i class="fa fa-bars form-control-feedback"></i> | |
| </div> | |
| <!-- tabindex logic is +1 due to 0 start of $index and then add on to start at the correct point, make sure to use tabindex='{{players.length + offset}}' on everything that gets focus after this --> | |
| </div> | |
| </div> | |
| </div> |
| angular.module("dragndropdemo", ['ngRepeatReorder']); | |
| function dragndropdemo($scope) { | |
| $scope.names = [{val:'bob'},{val:'lucy'},{val:'john'},{val:'luke'},{val:'han'}]; | |
| $scope.checkForNameDelete = function($index){ | |
| if($scope.names[$index].val === ''){ | |
| $scope.names.splice($index, 1); | |
| } | |
| }; | |
| }; |
| .draggable-group { | |
| width: 277px; | |
| } | |
| .ng-repeat-reorder-parent, [ng-repeat-reorder]{ | |
| z-index: 10; | |
| position: relative; | |
| } | |
| [ng-repeat-reorder].dragging{ | |
| z-index: 11; | |
| position: absolute; | |
| } | |
| .active-drag-below { | |
| -moz-user-select: none; | |
| -khtml-user-select: none; | |
| -webkit-user-select: none; | |
| user-select: none; | |
| } |