Drag and drop w AngularJS cz. 2
Tym razem rozbudujemy nasz poprzedni przykład drag nad drop. Dodamy nowy typ - kontener na inne pola. Końcowy efekt będzie wyglądał następująco.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>AngularJS Drag and drop example 2</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/demo-framework.css">
<link rel="stylesheet" type="text/css" href="css/simple.css?a">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="js/angular-drag-and-drop-lists.js"></script>
<script type="text/javascript" src="js/list2.js?a"></script>
</head>
<body ng-app="demo" ng-controller="SimpleDemoController">
<h1>AngularJS Drag and drop</h1>
<div class="simpleDemo row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">List A</h3>
</div>
<div class="panel-body">
<ul class="typeA" dnd-list="models.lists.A" dnd-disable-if="true">
<li ng-repeat="item in models.lists.A"
data-type="{{item.type}}"
dnd-draggable="item"
dnd-type="'{{item.type}}'"
dnd-moved="models.lists.A.splice($index, 1)"
dnd-effect-allowed="copy"
dnd-selected="models.selected = item"
ng-class="{'selected': models.selected === item}"
>
{{item.label}}
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">List B</h3>
</div>
<div class="panel-body">
<ul class="typeB" dnd-list="models.lists.B">
<li ng-repeat="item in models.lists.B"
data-type="{{item.type}}"
dnd-draggable="item"
dnd-type="'{{item.type}}'"
dnd-moved="models.lists.B.splice($index, 1)"
dnd-effect-allowed="move"
dnd-selected="models.selected = item"
ng-class="{'selected': models.selected === item}"
>
<div ng-if="item.type === 'container'" class="panel-heading"><h3 class="panel-title">
{{item.label}}
</h3></div>
{{item.label}} <span ng-if="item.type === 'container'">content</span>
<div class="column" ng-if="item.type === 'container'">
<ul dnd-list="item.columns" dnd-allowed-types="allowedTypes">
<li ng-repeat="el in item.columns"
dnd-draggable="el"
dnd-type="'{{el.type}}'"
dnd-effect-allowed="move"
dnd-moved="item.columns.splice($index, 1)"
dnd-selected="models.selected = item"
ng-class="{selected: models.selected === item}"
>{{el.label}}
</li>
</ul>
</div>
<div class="clearfix"></div>
</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>
</body>
</html>
Kod html jest prawie taki sam jak w poprzednim przykładzie. Doszedł jedynie następujący kod
dotyczący wyświetlenia elementów typu kontener i ich elementów podrzędnych.
<div ng-if="item.type === 'container'" class="panel-heading"><h3 class="panel-title">
{{item.label}}
</h3></div>
{{item.label}} <span ng-if="item.type === 'container'">content</span>
<div class="column" ng-if="item.type === 'container'">
<ul dnd-list="item.columns" dnd-allowed-types="allowedTypes">
<li ng-repeat="el in item.columns"
dnd-draggable="el"
dnd-type="'{{el.type}}'"
dnd-effect-allowed="move"
dnd-moved="item.columns.splice($index, 1)"
dnd-selected="models.selected = item"
ng-class="{selected: models.selected === item}"
>{{el.label}}
</li>
</ul>
</div>
<div class="clearfix"></div>
Kod javascript również jest bardzo podobny do poprzedniego przykładu.
Budujemy jedynie typ kontener (type="container"), który zawiera dodatkowy atrybut columns
na elementy podrzędne.
angular.module("demo", ["dndLists"]).controller("SimpleDemoController", function($scope) {
$scope.models = {
selected: null,
lists: {"A": [], "B": []}
};
$scope.allowedTypes = ['item'];
// Generate initial model
for (var i = 1; i <= 3; ++i) {
$scope.models.lists.A.push({id: i, label: "Item A" + i, type: "item"});
$scope.models.lists.B.push({id: i,label: "Item B" + i, type: "item"});
}
$scope.models.lists.A[2].type="container";
$scope.models.lists.A[2].columns=[];
$scope.models.lists.B[0].id=4;
$scope.models.lists.B[1].id=5;
$scope.models.lists.B[2].id=6;
$scope.models.lists.B[1].type="container";
$scope.models.lists.B[1].columns=[{
"id": 50,
"label": "Item B21",
"type": "item"
},
{
"id": 51,
"label": "Item B22",
"type": "item"
}];
// Model to JSON for demo purpose
$scope.$watch('models', function(model) {
$scope.modelAsJson = angular.toJson(model, true);
}, true);
});
Demo działania