forked from bevacqua/angularjs-dragula
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
267 lines (255 loc) · 12.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<!doctype html>
<link rel="shortcut icon" href="favicon.ico">
<link href='dist/dragula.css' rel='stylesheet' type='text/css' />
<link href='example/example.css' rel='stylesheet' type='text/css' />
<title>angular-dragula</title>
<h1><a href='https://github.com/bevacqua/angular-dragula'><img src='resources/logo.svg' onerror='this.src="resources/logo.png"' alt='angular-dragula'/></a></h1>
<h3 class='tagline'>Drag and drop so simple it hurts</h3>
<a href='https://github.com/bevacqua/angular-dragula'>
<img class='gh-fork' src='https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67' alt='Fork me on GitHub' data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png' />
</a>
<div class='parent'>Note: these examples mimic the ones for <code>dragula</code>, but using <code>angular-dragula</code>.</div>
<div class='examples' ng-app='angular-dragula-example'>
<div class='parent'>
<label for='hy'>Move stuff between these two containers. Note how the stuff gets inserted near the mouse pointer? Great stuff.</label>
<div class='wrapper'>
<div class='container' dragula='"first-bag"'>
<div>You can move these elements between these two containers</div>
<div>Moving them anywhere else isn't quite possible</div>
<div>There's also the possibility of moving elements around in the same container, changing their position</div>
</div>
<div class='container' dragula='"first-bag"'>
<div>This is the default use case. You only need to specify the containers you want to use</div>
<div>More interactive use cases lie ahead</div>
<div>Make sure to check out the <a href='https://github.com/bevacqua/dragula#readme'>documentation on GitHub!</a></div>
</div>
</div>
<pre>
<code>
<div dragula='"first-bag"'></div>
<div dragula='"first-bag"'></div>
</code>
</pre>
</div>
<div class='parent' ng-controller='ExampleCtrl'>
<label for='hy'>There are plenty of events along the lifetime of a drag event. Check out <a href='https://github.com/bevacqua/dragula#drakeon-events'>all of them</a> in the docs!</label>
<div class='wrapper'>
<div class='container' dragula='"second-bag"'>
<div>As soon as you start dragging an element, a <code>drag</code> event is fired</div>
<div>Whenever an element is cloned because <code>copy: true</code>, a <code>cloned</code> event fires</div>
<div>The <code>shadow</code> event fires whenever the placeholder showing where an element would be dropped is moved to a different container or position</div>
<div>A <code>drop</code> event is fired whenever an element is dropped anywhere other than its origin <em>(where it was initially dragged from)</em></div>
</div>
<div class='container' dragula='"second-bag"'>
<div>If the element gets removed from the DOM as a result of dropping outside of any containers, a <code>remove</code> event gets fired</div>
<div>A <code>cancel</code> event is fired when an element would be dropped onto an invalid target, but retains its original placement instead</div>
<div>The <code>over</code> event fires when you drag something over a container, and <code>out</code> fires when you drag it away from the container</div>
<div>Lastly, a <code>dragend</code> event is fired whenever a drag operation ends, regardless of whether it ends in a cancellation, removal, or drop</div>
</div>
</div>
<pre>
<code>
<div dragula='"second-bag"'></div>
<div dragula='"second-bag"'></div>
app.controller('ExampleCtrl', ['$scope', function ($scope) {
$scope.$on('second-bag.drag', function (e, el) {
el.removeClass('ex-moved');
});
$scope.$on('second-bag.drop', function (e, el) {
el.addClass('ex-moved');
});
$scope.$on('second-bag.over', function (e, el, container) {
container.addClass('ex-over');
});
$scope.$on('second-bag.out', function (e, el, container) {
container.removeClass('ex-over');
});
}]);
</code>
</pre>
</div>
<div class='parent' ng-controller='AnotherExampleCtrl'>
<label for='hy'>Need to be able to quickly delete stuff when it spills out of the chosen containers? Note how you can easily sort the items in any containers by just dragging and dropping.</label>
<div class='wrapper'>
<div class='container' dragula='"third-bag"'>
<div>Banana Boat</div>
<div>Orange Juice</div>
<div>Cuban Cigar</div>
<div>Terrible Comedian</div>
<div>Anxious Cab Driver</div>
<div>Thriving Venture</div>
<div>Calm Clam</div>
</div>
</div>
<pre>
<code>
<div dragula='"third-bag"'></div>
app.controller('AnotherExampleCtrl', ['$scope', 'dragulaService',
function ($scope, dragulaService) {
dragulaService.options($scope, 'third-bag', {
removeOnSpill: true
});
}
]);
</code>
</pre>
</div>
<div class='parent' ng-controller='SuchExampleCtrl'>
<label for='hy'>By default, dropping an element outside of any known containers will keep the element in the last place it went over. You can make elements go back to origin if they're dropped outside of known containers, too.</label>
<div class='wrapper'>
<div class='container' dragula='"fourth-bag"'>
<div>Moving items between containers works as usual</div>
<div>If you try to drop an item outside of any containers, though, it'll retain its original position</div>
<div>When that happens, a <code>cancel</code> event will be raised</div>
</div>
<div class='container' dragula='"fourth-bag"'>
<div>Note that the dragged element will go back to the place you originally dragged it from, even if you move it over other containers</div>
<div>This is useful if you want to ensure drop events only happen when the user intends for them to happen explicitly, avoiding surprises</div>
</div>
</div>
<pre>
<code>
<div dragula='"fourth-bag"'></div>
<div dragula='"fourth-bag"'></div>
app.controller('SuchExampleCtrl', ['$scope', 'dragulaService',
function ($scope, dragulaService) {
dragulaService.options($scope, 'fourth-bag', {
revertOnSpill: true
});
}
]);
</code>
</pre>
</div>
<div class='parent' ng-controller='VeryExampleCtrl'>
<label for='hy'>Copying stuff is common too, so we made it easy for you.</label>
<div class='wrapper'>
<div class='container' dragula='"fifth-bag"'>
<div>When elements are copyable, they can't be sorted in their origin container</div>
<div>Copying prevents original elements from being dragged. A copy gets created and <em>that</em> gets dragged instead</div>
<div>Whenever that happens, a <code>cloned</code> event is raised</div>
</div>
<div class='container' dragula='"fifth-bag"'>
<div>Note that the clones get destroyed if they're not dropped into another container</div>
<div>You'll be dragging a copy, so when they're dropped into another container you'll see the duplication.</div>
</div>
</div>
<pre>
<code>
<div dragula='"fifth-bag"'></div>
<div dragula='"fifth-bag"'></div>
app.controller('VeryExampleCtrl', ['$scope', 'dragulaService',
function ($scope, dragulaService) {
dragulaService.options($scope, 'fifth-bag', {
copy: true
});
}
]);
</code>
</pre>
</div>
<div class='parent' ng-controller='MuchExampleCtrl'>
<label for='hy'>Drag handles float your cruise?</label>
<div class='wrapper'>
<div class='container' dragula='"sixth-bag"'>
<div><span class='handle'>+</span>Move me, but you can use the plus sign to drag me around.</div>
<div><span class='handle'>+</span>Note that <code>handle</code> element in the <code>moves</code> handler is just the original event target.</div>
</div>
<div class='container' dragula='"sixth-bag"'>
<div><span class='handle'>+</span>This might also be useful if you want multiple children of an element to be able to trigger a drag event.</div>
<div><span class='handle'>+</span>You can also use the <code>moves</code> option to determine whether an element can be dragged at all from a container, <em>drag handle or not</em>.</div>
</div>
</div>
<pre>
<code>
<div dragula='"sixth-bag"'></div>
<div dragula='"sixth-bag"'></div>
app.controller('MuchExampleCtrl', ['$scope', 'dragulaService',
function ($scope, dragulaService) {
dragulaService.options($scope, 'sixth-bag', {
moves: function (el, container, handle) {
return handle.className === 'handle';
}
});
}
]);
</code>
</pre>
<div>There are a few similar mechanisms to determine whether an element can be dragged from a certain container <a href='https://github.com/bevacqua/dragula#optionsmoves'>(<code>moves</code>)</a>, whether an element can be dropped into a certain container at a certain position <a href='https://github.com/bevacqua/dragula#optionsaccepts'>(<code>accepts</code>)</a>, and whether an element is able to originate a drag event <a href='https://github.com/bevacqua/dragula#optionsinvalid'>(<code>invalid</code>)</a>.</div>
</div>
<div class='parent' ng-controller='WowExampleCtrl'>
<label><strong>Click or Drag!</strong> Fires a click when the mouse button is released before a <code>mousemove</code> event, otherwise a drag event is fired. No extra configuration is necessary.</label>
<div class='wrapper'>
<div class='container' dragula='"seventh-bag"'>
<div>Clicking on these elements triggers a regular <code>click</code> event you can listen to.</div>
<div>Try dragging or clicking on this element.</div>
<div>Note how you can click normally?</div>
<div>Drags don't trigger click events.</div>
<div>Clicks don't end up in a drag, either.</div>
<div>This is useful if you have elements that can be both clicked or dragged.</div>
<div ng-click='onclick()' ng-bind='clicked ? "ZOMG, THAT TICKLES! PLEASE. STOP." : "Business as usual."'></div>
</div>
</div>
<pre>
<code>
<div dragula='"seventh-bag"'></div>
app.controller('WowExampleCtrl', ['$scope', '$timeout',
function ($scope, $timeout) {
$scope.onclick = onclick;
function onclick () {
$scope.clicked = true;
$timeout(function offclick () {
$scope.clicked = false;
}, 2000);
}
}
]);
</code>
</pre>
</div>
<div class='parent' ng-controller='RepeatCtrl'>
<label for='hy'><strong>Angular-specific example.</strong> Fancy some <code>ng-repeat</code>?</label>
<div class='wrapper'>
<div class='container' dragula='"another-bag"' dragula-model='many'>
<div ng-repeat='text in many' ng-bind='text'></div>
</div>
<div class='container' dragula='"another-bag"' dragula-model='many2'>
<div ng-repeat='text in many2' ng-bind='text'></div>
</div>
</div>
<div class='wrapper'>
<div class='container'><pre>{{many | json}}</pre></div>
<div class='container'><pre>{{many2 | json}}</pre></div>
</div>
<pre>
<code>
<div class='wrapper'>
<div class='container' dragula='"another-bag"' dragula-model='many'>
<div ng-repeat='text in many' ng-bind='text'></div>
</div>
<div class='container' dragula='"another-bag"' dragula-model='many2'>
<div ng-repeat='text in many2' ng-bind='text'></div>
</div>
</div>
app.controller('RepeatCtrl', ['$scope', 'dragulaService',
function ($scope, dragulaService) {
$scope.many = ['The', 'possibilities', 'are', 'endless!'];
$scope.many2 = ['Explore', 'them'];
}
]);
</code>
</pre>
</div>
<div class='parent' ng-controller='NestedRepeatCtrl'>
<label for='hy'><strong>Angular-specific example.</strong> Fancy some nested <code>ng-repeat</code>?</label>
<div class='wrapper'>
<div class='container' ng-repeat="group in groups" dragula="'nested-bag'" dragula-scope="$parent">
<div ng-repeat='item in group.items' ng-bind='item.name'></div>
</div>
</div>
</div>
</div>
<h3>Get it on GitHub! <a href='https://github.com/bevacqua/angular-dragula'>bevacqua/angular-dragula</a></h3>
<script src='dist/angular.js'></script>
<script src='dist/angular-dragula.js'></script>
<script src='example/example.js'></script>