AngularJS-ngRepeat-Drag-n-Drop.markdown

AngularJS ngRepeat Drag n Drop

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.

License.

index.html

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

script.js

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);
    }
  };
};

style.css

.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;
}