AngularJS ngRepeat Drag n Drop

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

A Pen by SimeonC on CodePen.

License.

index.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="https://github.com/SimeonC/ngRepeatReorder">https://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>

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

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script src="https://s.cdpn.io/61329/angular-hammer.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61329/ngRepeatReorder.js"></script>

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

styles

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />