CodePen

HTML

            
              <div class="container" ng-app="dragndropdemo">
		<div class="row">
			<div class="span-12"><h4>Type in the text box to add new names to the list, delete all text in a box to remove it. Click and drag the <i class="fa fa-bars"></i> to reorder the names</h4></div>
		</div>
		<div class="row">
			<div class="span-12"><h5>To report bug issues get the source code or get installation instructions go to <a href="http://github.com/SimeonC/ngRepeatReorder">http://github.com/SimeonC/ngRepeatReorder</a></h5></div>
		</div>
		<div class="row" ng-controller="dragndropdemo">
			<div id="names" class="span-3 form-inline" role="form">
				<div class="form-group btn btn-primary">Enter Names...</div>
				<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'
						tabindex='{{$index + 1}}'
						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 class="form-group">
					<input class="form-control form-inline" type='text'
						ng-model='tempplayer'
						tabindex='{{names.length + 1}}'
						placeholder='Enter a name...'/>
					</div>
					<button ng-click="updateNames()">Add Name</button>
				</div>
			{{names}},{{tempplayer}}
			</div>
		</div>
	</div>
            
          
!
via HTML Inspector

CSS

            
              .span-3 {
  width: 277px;
}

.form-group.btn {
  border: 1px solid #cccccc;
  border-top-radius: 4px;
  border-bottom-radius: 0;
  width: 208px !important;
}

.form-group, {
  float: left;
  clear: left;
  width: 240px;
}

input.form-control {
  margin-bottom: 0;
  border-radius: 0;
  border: 1px solid #cccccc;
  border-top: none;
  padding-right: 20px;
}
.row .form-group:first-child input.form-control {
  border-top: 1px solid #cccccc;
  border-top-radius: 4px;
}
.row .form-group:last-child input.form-control {
  border-bottom-radius: 4px;
}
.ng-repeat-reorder-parent, [ng-repeat-reorder]{
	z-index: 10;
	position: relative;
}
[ng-repeat-reorder].dragging{
	z-index: 11;
	position: absolute;
}
.form-group.dragging input {
  border: 1px solid #cccccc;
}
.form-group.dragging-after input {
  background-color: green;
  border-top: 1px solid #cccccc;
}
.form-group.dragging-before input {
  background-color: red;
}

#names > div:first-child{
	border-bottom-left-radius: none;
	border-bottom-right-radius: none;
}

.active-drag-below {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              angular.module("dragndropdemo", ['ngRepeatReorder']);
		function dragndropdemo($scope) {
			$scope.names = [{val:'bob'},{val:'lucy'},{val:'john'},{val:'luke'},{val:'han'}];
			$scope.tempplayer = '';
			$scope.updateNames = function (){
				if($scope.tempplayer === "") return
				$scope.names.push({val: $scope.tempplayer});
				$scope.tempplayer = "";
			};
			$scope.checkForNameDelete = function($index){
				if($scope.names[$index].val === ''){
					$scope.names.splice($index, 1);
				}
			};
		};
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................