File tree Expand file tree Collapse file tree 3 files changed +50
-18
lines changed Expand file tree Collapse file tree 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+
16.list {
7+ border : 1px solid # 000 ;
8+ border-radius : 15px ;
29 list-style : none outside none;
3- margin : 10px 0 30px ;
10+ margin : 10px ;
11+ padding : 10px ;
412}
513
614.item {
7- width : 200px ;
815 padding : 5px 10px ;
916 margin : 5px 0 ;
1017 border : 2px solid # 444 ;
2128/*** Extra ***/
2229
2330.logList {
24- margin-top : 20px ;
25- width : 250px ;
2631 min-height : 200px ;
27- padding : 5px 15px ;
2832 border : 5px solid # 000 ;
2933 border-radius : 15px ;
3034}
3135
3236.logList : before {
33- content : 'log' ;
34- padding : 0 5px ;
35- position : relative;
36- top : -1.1em ;
3737 background-color : # FFF ;
3838}
3939
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 ">
45 < ul ui-sortable ="sortableOptions " ng-model ="list " class ="list ">
56 < li ng-repeat ="item in list " class ="item "> {{item.text}}</ li >
67 </ ul >
78 </ div >
8- < div class ="col-md-6 ">
9+ < div class ="col-sm-4 ">
910 < ul class ="list logList ">
1011 < li ng-repeat ="entry in sortingLog " class ="logItem "> {{entry.Text}}</ li >
1112 </ ul >
1213 </ div >
1314 </ 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) {
2828 $scope . sortingLog . push ( logEntry ) ;
2929 }
3030 } ;
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