Skip to content

Commit 107e11d

Browse files
marceljuenemannmarceljuenemann
committed
Demo for multiselection
1 parent b90c941 commit 107e11d

File tree

7 files changed

+174
-0
lines changed

7 files changed

+174
-0
lines changed

‎demo/framework/demo-framework.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ angular.module("demo", ["ngRoute", "dndLists"])
1717
templateUrl: 'advanced/advanced-frame.html',
1818
controller: 'AdvancedDemoController'
1919
})
20+
.when('/multi', {
21+
templateUrl: 'multi/multi-frame.html',
22+
controller: 'MultiDemoController'
23+
})
2024
.otherwise({redirectTo: '/nested'});
2125
})
2226

@@ -31,6 +35,7 @@ angular.module("demo", ["ngRoute", "dndLists"])
3135
{label: "Simple Demo", href: "#/simple"},
3236
{label: "Item Types", href: "#/types"},
3337
{label: "Advanced Demo", href: "#/advanced"},
38+
{label: "Multiselection", href: "#/multi"},
3439
{label: "Github", href: "https://github.com/marceljuenemann/angular-drag-and-drop-lists"}
3540
];
3641

‎demo/framework/vendor/ic_content_copy_black_24dp_2x.png

180 Bytes
Loading

‎demo/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<link rel="stylesheet" type="text/css" href="nested/nested.css" />
1818
<link rel="stylesheet" type="text/css" href="types/types.css" />
1919
<link rel="stylesheet" type="text/css" href="advanced/advanced.css" />
20+
<link rel="stylesheet" type="text/css" href="multi/multi.css" />
2021

2122
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script>
2223
<script src="framework/vendor/prism.js"></script>
@@ -26,6 +27,7 @@
2627
<script src="nested/nested.js"></script>
2728
<script src="types/types.js"></script>
2829
<script src="advanced/advanced.js"></script>
30+
<script src="multi/multi.js"></script>
2931

3032
</head>
3133
<body ng-app="demo">

‎demo/multi/multi-frame.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<h1>Demo: Multiselect Lists</h1>
2+
3+
<div class="alert alert-success">
4+
<strong>Instructions:</strong>
5+
Click on items to select/unselect them. When dragging, all selected items will be moved at once.
6+
</div>
7+
8+
<div class="multiDemo row">
9+
10+
<div class="col-md-8">
11+
<div class="row">
12+
<div ng-repeat="list in models" class="col-md-6">
13+
<div class="panel panel-info">
14+
<div class="panel-heading">
15+
<h3 class="panel-title">List {{list.listName}}</h3>
16+
</div>
17+
<div class="panel-body" ng-include="'multi/multi.html'"></div>
18+
</div>
19+
</div>
20+
</div>
21+
22+
<div view-source="multi"></div>
23+
24+
</div>
25+
26+
<div class="col-md-4">
27+
<div class="panel panel-default">
28+
<div class="panel-heading">
29+
<h3 class="panel-title">Generated Model</h3>
30+
</div>
31+
<div class="panel-body">
32+
<pre class="code">{{modelAsJson}}</pre>
33+
</div>
34+
</div>
35+
</div>
36+
37+
</div>

‎demo/multi/multi.css

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/**
2+
* For the correct positioning of the placeholder element, the dnd-list and
3+
* it's children must have position: relative
4+
*/
5+
.multiDemo ul[dnd-list],
6+
.multiDemo ul[dnd-list] > li {
7+
position: relative;
8+
}
9+
10+
/**
11+
* The dnd-list should always have a min-height,
12+
* otherwise you can't drop into it once it's empty
13+
*/
14+
.multiDemo ul[dnd-list] {
15+
min-height: 42px;
16+
padding-left: 0px;
17+
}
18+
19+
/**
20+
* An element with .dndPlaceholder class will be
21+
* added to the dnd-list while the user is dragging
22+
* over it.
23+
*/
24+
.multiDemo ul[dnd-list] .dndPlaceholder {
25+
display: block;
26+
background-color: #ddd;
27+
min-height: 42px;
28+
}
29+
30+
/**
31+
* The dnd-lists's child elements currently MUST have
32+
* position: relative. Otherwise we can not determine
33+
* whether the mouse pointer is in the upper or lower
34+
* half of the element we are dragging over. In other
35+
* browsers we can use event.offsetY for this.
36+
*/
37+
.multiDemo ul[dnd-list] li {
38+
background-color: #fff;
39+
border: 1px solid #ddd;
40+
border-top-right-radius: 4px;
41+
border-top-left-radius: 4px;
42+
display: block;
43+
padding: 10px 15px;
44+
margin-bottom: -1px;
45+
}
46+
47+
/**
48+
* Show selected elements in green
49+
*/
50+
.multiDemo ul[dnd-list] li.selected {
51+
background-color: #dff0d8;
52+
color: #3c763d;
53+
}

‎demo/multi/multi.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<ul dnd-list dnd-drop="onDrop(list, item, index)">
2+
<li ng-repeat="item in list.items"
3+
dnd-draggable="getSelectedItemsIncluding(list, item)"
4+
dnd-dragstart="onDragstart(list, event)"
5+
dnd-moved="onMoved(list)"
6+
dnd-dragend="list.dragging = false"
7+
dnd-selected="item.selected = !item.selected"
8+
ng-class="{'selected': item.selected}"
9+
ng-hide="list.dragging && item.selected"
10+
>
11+
{{item.label}}
12+
</li>
13+
</ul>

‎demo/multi/multi.js

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
angular.module("demo").controller("MultiDemoController", function($scope) {
2+
3+
$scope.models = [
4+
{listName: "A", items: [], dragging: false},
5+
{listName: "B", items: [], dragging: false}
6+
];
7+
8+
/**
9+
* dnd-dragging determines what data gets serialized and send to the receiver
10+
* of the drop. While we usually just send a single object, we send the array
11+
* of all selected items here.
12+
*/
13+
$scope.getSelectedItemsIncluding = function(list, item) {
14+
item.selected = true;
15+
return list.items.filter(function(item) { return item.selected; });
16+
};
17+
18+
/**
19+
* We set the list into dragging state, meaning the items that are being
20+
* dragged are hidden. We also use the HTML5 API directly to set a custom
21+
* image, since otherwise only the one item that the user actually dragged
22+
* would be shown as drag image.
23+
*/
24+
$scope.onDragstart = function(list, event) {
25+
list.dragging = true;
26+
var img = new Image();
27+
img.src = 'framework/vendor/ic_content_copy_black_24dp_2x.png';
28+
event.dataTransfer.setDragImage(img, 0, 0);
29+
};
30+
31+
/**
32+
* In the dnd-drop callback, we now have to handle the data array that we
33+
* sent above. We handle the insertion into the list ourselves. By returning
34+
* true, the dnd-list directive won't do the insertion itself.
35+
*/
36+
$scope.onDrop = function(list, items, index) {
37+
angular.forEach(items, function(item) { item.selected = false; });
38+
list.items = list.items.slice(0, index)
39+
.concat(items)
40+
.concat(list.items.slice(index));
41+
return true;
42+
}
43+
44+
/**
45+
* Last but not least, we have to remove the previously dragged items in the
46+
* dnd-moved callback.
47+
*/
48+
$scope.onMoved = function(list) {
49+
list.items = list.items.filter(function(item) { return !item.selected; });
50+
};
51+
52+
// Generate the initial model
53+
angular.forEach($scope.models, function(list) {
54+
for (var i = 1; i <= 4; ++i) {
55+
list.items.push({label: "Item " + list.listName + i});
56+
}
57+
});
58+
59+
// Model to JSON for demo purpose
60+
$scope.$watch('models', function(model) {
61+
$scope.modelAsJson = angular.toJson(model, true);
62+
}, true);
63+
64+
});

0 commit comments

Comments
 (0)