LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

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 to reorder the names

To report bug issues get the source code or get installation instructions go to https://github.com/SimeonC/ngRepeatReorder
Enter Names...
{{names}},{{tempplayer}}
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;
}
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);
				}
			};
		};

Description

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.
Term
Mon, 11/27/2017 - 21:28

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv