File tree 3 files changed +50
-18
lines changed
3 files changed +50
-18
lines changed Original file line number Diff line number Diff line change
1
+ .section {
2
+ margin-top : 30px ;
3
+ margin-bottom : 30px ;
4
+ }
5
+
1
6
.list {
7
+ border : 1px solid # 000 ;
8
+ border-radius : 15px ;
2
9
list-style : none outside none;
3
- margin : 10px 0 30px ;
10
+ margin : 10px ;
11
+ padding : 10px ;
4
12
}
5
13
6
14
.item {
7
- width : 200px ;
8
15
padding : 5px 10px ;
9
16
margin : 5px 0 ;
10
17
border : 2px solid # 444 ;
21
28
/*** Extra ***/
22
29
23
30
.logList {
24
- margin-top : 20px ;
25
- width : 250px ;
26
31
min-height : 200px ;
27
- padding : 5px 15px ;
28
32
border : 5px solid # 000 ;
29
33
border-radius : 15px ;
30
34
}
31
35
32
36
.logList : before {
33
- content : 'log' ;
34
- padding : 0 5px ;
35
- position : relative;
36
- top : -1.1em ;
37
37
background-color : # FFF ;
38
38
}
39
39
40
- ul [ui-sortable ] {
41
- float : right;
42
- }
Original file line number Diff line number Diff line change 1
- < section ng-app ="sortableApp " ng-controller ="sortableController ">
2
- < div class ="row ">
3
- < div class ="col-md-6 ">
1
+ < section ng-app ="sortableApp ">
2
+ < h1 > Sortable items</ h1 >
3
+ < div ng-controller ="sortableController " class ="section row ">
4
+ < div class ="col-sm-offset-2 col-sm-4 ">
4
5
< ul ui-sortable ="sortableOptions " ng-model ="list " class ="list ">
5
6
< li ng-repeat ="item in list " class ="item "> {{item.text}}</ li >
6
7
</ ul >
7
8
</ div >
8
- < div class ="col-md-6 ">
9
+ < div class ="col-sm-4 ">
9
10
< ul class ="list logList ">
10
11
< li ng-repeat ="entry in sortingLog " class ="logItem "> {{entry.Text}}</ li >
11
12
</ ul >
12
13
</ div >
13
14
</ div >
14
- </ section >
15
+
16
+ < h1 > Connected items</ h1 >
17
+ < div ng-controller ="connectedController " class ="section row ">
18
+ < div class ="col-sm-offset-2 col-sm-4 ">
19
+ < ul ui-sortable ="sortableOptions " ng-model ="leftArray " class ="list ">
20
+ < li ng-repeat ="item in leftArray " class ="item "> {{item.text}}</ li >
21
+ </ ul >
22
+ </ div >
23
+ < div class ="col-sm-4 ">
24
+ < ul ui-sortable ="sortableOptions " ng-model ="rightArray " class ="list ">
25
+ < li ng-repeat ="item in rightArray " class ="item "> {{item.text}}</ li >
26
+ </ ul >
27
+ </ div >
28
+ </ div >
29
+ </ section >
Original file line number Diff line number Diff line change @@ -28,4 +28,24 @@ myapp.controller('sortableController', function ($scope) {
28
28
$scope . sortingLog . push ( logEntry ) ;
29
29
}
30
30
} ;
31
- } ) ;
31
+ } ) ;
32
+
33
+ myapp . controller ( 'connectedController' , function ( $scope ) {
34
+ function buildArray ( name , size ) {
35
+ var i , array = [ ] ;
36
+ for ( i = 1 ; i <= size ; i = i + 1 ) {
37
+ array . push ( {
38
+ text : name + ' ' + i ,
39
+ value : i
40
+ } ) ;
41
+ }
42
+
43
+ return array ;
44
+ }
45
+
46
+ $scope . leftArray = buildArray ( 'Left' , 5 ) ;
47
+ $scope . rightArray = buildArray ( 'Right' , 7 ) ;
48
+ $scope . sortableOptions = {
49
+ connectWith : '.list'
50
+ } ;
51
+ } ) ;
You can’t perform that action at this time.
0 commit comments