Skip to content

Commit 388f545

Browse files
codef0rmerzcodef0rmerz
committed
fix(demo): Closes #240 - add vertical sortable example
1 parent eb1d7e6 commit 388f545

File tree

1 file changed

+74
-16
lines changed

1 file changed

+74
-16
lines changed

‎demo/dnd-insertInline.html

Lines changed: 74 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,9 @@
1818
body {
1919
padding: 30px;
2020
}
21-
.thumbnails[jqyoui-droppable], .thumbnail[jqyoui-droppable] { border: 1px solid red; }
22-
.thumbnail {
21+
/* Horizontal Sortable */
22+
.hthumbnail[jqyoui-droppable] { border: 1px solid red; }
23+
.hthumbnail {
2324
height: 50px;
2425
width: 50px;
2526
text-align: center;
@@ -30,32 +31,63 @@
3031
-webkit-transition: none;
3132
transition: none;
3233
}
33-
34-
.thumbnail[data-drag="false"] { background: green; }
35-
36-
.thumbnail.ng-leave {
34+
.hthumbnail.ng-leave {
3735
-webkit-transition-duration: 0s;
3836
transition-duration: 0s;
3937
opacity: 1;
4038
}
41-
42-
.thumbnail.ng-leave.ng-leave-active {
39+
.hthumbnail.ng-leave.ng-leave-active {
4340
opacity: 0;
4441
}
45-
46-
.thumbnail.ng-enter {
42+
.hthumbnail.ng-enter {
4743
-webkit-transition: left 0.3s;
4844
transition: left 0.3s;
4945
}
50-
.thumbnail.ng-enter[data-direction="left"] {
51-
left: -80px;
46+
.hthumbnail.ng-enter[data-direction="left"] {
47+
left: -80px; /* 60px width + 20px marginLeft */
5248
}
53-
.thumbnail.ng-enter[data-direction="right"] {
54-
left: 80px;
49+
.hthumbnail.ng-enter[data-direction="right"] {
50+
left: 80px; /* 60px width + 20px marginLeft */
5551
}
56-
.thumbnail.ng-enter.ng-enter-active {
52+
.hthumbnail.ng-enter.ng-enter-active {
5753
left: 0px;
5854
}
55+
56+
/* Vertical Sortable */
57+
.vthumbnail[jqyoui-droppable] { border: 1px solid red; }
58+
.vthumbnail {
59+
height: 50px;
60+
width: 50px;
61+
text-align: center;
62+
padding-top: 0px;
63+
cursor: pointer;
64+
background: rgb(182, 173, 123);
65+
position: relative;
66+
-webkit-transition: none;
67+
transition: none;
68+
float: none !important;
69+
}
70+
.vthumbnail.ng-leave {
71+
-webkit-transition-duration: 0s;
72+
transition-duration: 0s;
73+
opacity: 1;
74+
}
75+
.vthumbnail.ng-leave.ng-leave-active {
76+
opacity: 0;
77+
}
78+
.vthumbnail.ng-enter {
79+
-webkit-transition: top 0.3s;
80+
transition: top 0.3s;
81+
}
82+
.vthumbnail.ng-enter[data-direction="left"] {
83+
top: -76px; /* 56px width + 20px marginBottom */
84+
}
85+
.vthumbnail.ng-enter[data-direction="right"] {
86+
top: 76px; /* 56px width + 20px marginBottom */
87+
}
88+
.vthumbnail.ng-enter.ng-enter-active {
89+
top: 0px;
90+
}
5991
</style>
6092

6193
<script type="text/javascript">
@@ -71,15 +103,41 @@
71103
{ 'title': 'N', 'drag': true }
72104
];
73105
});
106+
107+
App.controller('twoCtrl', function($scope) {
108+
$scope.list1 = [
109+
{ 'title': 'N', 'drag': true },
110+
{ 'title': 'L', 'drag': true },
111+
{ 'title': 'I', 'drag': true },
112+
{ 'title': 'I', 'drag': true },
113+
{ 'title': 'E', 'drag': true },
114+
{ 'title': 'N', 'drag': true }
115+
];
116+
});
74117
</script>
75118
</head>
76119
<body>
120+
<h1>Horizontal Sortable:</h1>
77121
<div ng-controller="oneCtrl">
78122
<div class='contentWrapper ng-cloak'>
79123
<div class='content'>
80124
<div class="row-fluid">
81125
<ul class="thumbnails">
82-
<li class="thumbnail" ng-repeat="item in list1" data-drop="true" data-drag="true" ng-model="list1" jqyoui-droppable="{index: {{$index}}}" jqyoui-draggable="{index: {{$index}}, insertInline: true, direction:'jqyouiDirection'}" data-jqyoui-options="{revert: 'invalid'}" data-direction="{{item.jqyouiDirection}}">
126+
<li class="thumbnail hthumbnail" ng-repeat="item in list1" data-drop="true" data-drag="true" ng-model="list1" jqyoui-droppable="{index: {{$index}}}" jqyoui-draggable="{index: {{$index}}, insertInline: true, direction:'jqyouiDirection'}" data-jqyoui-options="{revert: 'invalid'}" data-direction="{{item.jqyouiDirection}}">
127+
<h1>{{item.title}}</h1>
128+
</li>
129+
</ul>
130+
</div>
131+
</div>
132+
</div>
133+
</div>
134+
<h1>Vertical Sortable:</h1>
135+
<div ng-controller="twoCtrl">
136+
<div class='contentWrapper ng-cloak'>
137+
<div class='content'>
138+
<div class="row-fluid">
139+
<ul class="thumbnails">
140+
<li class="thumbnail vthumbnail" ng-repeat="item in list1" data-drop="true" data-drag="true" ng-model="list1" jqyoui-droppable="{index: {{$index}}}" jqyoui-draggable="{index: {{$index}}, insertInline: true, direction:'jqyouiDirection'}" data-jqyoui-options="{revert: 'invalid'}" data-direction="{{item.jqyouiDirection}}">
83141
<h1>{{item.title}}</h1>
84142
</li>
85143
</ul>

0 commit comments

Comments
 (0)