<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Drag & Drop Demo 1</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-drag-and-drop-lists/2.1.0/angular-drag-and-drop-lists.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="script.js"></script>
<link href="style.css" rel="stylesheet" />
</head>
<body ng-app="app" ng-controller="ctrl">
<div class="container">
<div class="simpleDemo row">
<div class="col-md-8">
<div class="row">
<div ng-repeat="(listName, list) in models.lists" class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading">
<div class="btn-group pull-right">
<span class="glyphicon glyphicon-plus" aria-hidden="true" ng-click="addToList(list)"></span>
</div>
<h3 class="panel-title">List {{listName}}</h3>
</div>
<div class="panel-body">
<!-- The dnd-list directive allows to drop elements into it. The dropped data will be added to the referenced list -->
<ul dnd-list="list" class="ng-scope">
<!-- The dnd-draggable directive makes an element draggable and will
transfer the object that was assigned to it. If an element was
dragged away, you have to remove it from the original list
yourself using the dnd-moved attribute -->
<li ng-repeat="item in list" dnd-draggable="item" dnd-moved="list.splice($index, 1)" dnd-effect-allowed="move" dnd-selected="models.selected = item" ng-class="{'selected': models.selected === item}" draggable="true">
<a class="close" ng-click="removeFromList(list, $index)">×</a>
<a class="close" ng-click="cloneItem(list, $index)">=</a>
<edit-in-place value="item.label"></edit-in-place>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Generated Model</h3>
</div>
<div class="panel-body">
<pre class="code">{{modelAsJson}}</pre>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
var
app = angular.module('app', ['dndLists'])
, $s
;
app.directive('editInPlace', function() {
return {
restrict: 'E',
scope: {
value: '='
},
template: '<span ng-dblclick="edit()" ng-bind="value"></span><input ng-model="value"></input>',
link: function($scope, element, attrs) {
// Let's get a reference to the input element, as we'll want to reference it.
var inputElement = angular.element(element.children()[1]);
// This directive should have a set class so we can style it.
element.addClass('edit-in-place');
// Initially, we're not editing.
$scope.editing = false;
// ng-click handler to activate edit-in-place
$scope.edit = function() {
$scope.editing = true;
// We control display through a class on the directive itself. See the CSS.
element.addClass('active');
// And we must focus the element.
// `angular.element()` provides a chainable array, like jQuery so to access a native DOM function,
// we have to reference the first element in the array.
inputElement[0].focus();
};
// When we leave the input, we're done editing.
inputElement.prop('onblur', function() {
$scope.editing = false;
element.removeClass('active');
});
}
};
});
app.controller('ctrl', function($scope) {
$s = $scope;
$scope.models = {
selected: null,
lists: {
"A": [],
"B": []
}
};
// Generate initial model
for (var i = 1; i <= 3; ++i) {
$scope.models.lists.A.push({
label: "Item A" + i
});
$scope.models.lists.B.push({
label: "Item B" + i
});
}
$scope.addToList = function(list) {
var
i = {
label: "Item " + (list.length + 1)
};
list.push(i);
}
$scope.cloneItem = function(list, index) {
var
//o = { label : list[index].label+"-1"};
o = angular.copy(list[index]);
o.label = o.label+"-1";
list.splice( index + 1, 0, o );
// $scope.$apply();
}
$scope.removeFromList = function(list, index) {
list.splice(index, 1);
}
$scope.list = $scope.models.lists.A;
// Model to JSON for demo purpose
$scope.$watch('models', function(model) {
$scope.modelAsJson = angular.toJson(model, true);
}, true);
$s.models.selected = $s.models.lists["A"][1];
});
/**
* The dnd-list should always have a min-height,
* otherwise you can't drop to it once it's empty
*/
.simpleDemo ul[dnd-list] {
min-height: 42px;
padding-left: 0px;
}
/**
* The dndDraggingSource class will be applied to
* the source element of a drag operation. It makes
* sense to hide it to give the user the feeling
* that he's actually moving it.
*/
.simpleDemo ul[dnd-list] .dndDraggingSource {
display: none;
}
/**
* An element with .dndPlaceholder class will be
* added to the dnd-list while the user is dragging
* over it.
*/
.simpleDemo ul[dnd-list] .dndPlaceholder {
background-color: #ddd;
display: block;
min-height: 42px;
}
.simpleDemo ul[dnd-list] li {
background-color: #fff;
border: 1px solid #ddd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
display: block;
padding: 10px 15px;
height: 45px;
margin-bottom: -1px;
}
/**
* Show selected elements in green
*/
.simpleDemo ul[dnd-list] li.selected {
background-color: #dff0d8;
color: #3c763d;
cursor: move;
}
.simpleDemo .panel-heading span {
cursor: pointer;
}
.simpleDemo .edit-in-place span {
cursor: pointer;
}
.simpleDemo .edit-in-place input {
display: none;
/*border-radius: 1px;*/
}
.simpleDemo .edit-in-place.active span {
display: none;
}
.simpleDemo .edit-in-place.active input {
display: inline-block;
}