Skip to content

Commit 3a3f4e1

Browse files
owen-m1owen-m1
committed
Updated demo
1 parent c2ef637 commit 3a3f4e1

File tree

3 files changed

+124
-5
lines changed

3 files changed

+124
-5
lines changed

‎index.html

Lines changed: 86 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@ <h5>Features</h5>
3636
<h5>Examples</h5>
3737
<li><a href="#grid">Grid</a></li>
3838
<li><a href="#nested">Nested sortables</a></li>
39+
<h5>Plugins</h5>
40+
<li><a href="#multi-drag">MultiDrag</a></li>
41+
<li><a href="#swap">Swap</a></li>
42+
<h5><a href="#comparisons">Comparisons</a></h5>
3943
<h5><a href="#frameworks">Framework Support</a></h5>
4044
</div>
4145
</div>
@@ -300,7 +304,7 @@ <h4 class="col-12">Grid Example</h4>
300304

301305
<div id="nested" class="row">
302306
<h4 class="col-12">Nested Sortables Example</h4>
303-
<p class="col-12">NOTE: When using nested Sortables with animation, it is recommended that the <code>fallbackOnBody</code> option is set to true.</p>
307+
<p class="col-12">NOTE: When using nested Sortables with animation, it is recommended that the <code>fallbackOnBody</code> option is set to true. <br />It is also always recommended that either the <code>invertSwap</code> option is set to true, or the <code>swapThreshold</code> option is lower than the default value of 1 (eg <code>0.65</code>).</p>
304308
<div id="nestedDemo" class="list-group col nested-sortable">
305309
<div class="list-group-item nested-1">Item 1.1
306310
<div class="list-group nested-sortable">
@@ -329,7 +333,84 @@ <h4 class="col-12">Nested Sortables Example</h4>
329333
</div>
330334
<div class="list-group-item nested-1">Item 1.5</div>
331335
</div>
336+
<div style="padding: 0" class="col-12">
337+
<pre class="prettyprint">// Loop through each nested sortable element
338+
for (var i = 0; i < nestedSortables.length; i++) {
339+
new Sortable(nestedSortables[i], {
340+
group: 'nested',
341+
animation: 150,
342+
fallbackOnBody: true,
343+
swapThreshold: 0.65
344+
});
345+
}</pre>
346+
</div>
347+
</div>
348+
349+
<div class="row">
350+
<h2 class="col-12">Plugins</h2>
351+
</div>
352+
<hr />
353+
354+
<div id="multi-drag" class="row">
355+
<h4 class="col-12">MultiDrag</h4>
356+
<p class="col-12">The <a target="_blank" href="https://github.com/SortableJS/Sortable/tree/master/plugins/MultiDrag">MultiDrag</a> plugin allows for multiple items to be dragged at a time. You can click to "select" multiple items, and then drag them as one item.</p>
357+
<div id="multiDragDemo" class="list-group col">
358+
<div class="list-group-item">Item 1</div>
359+
<div class="list-group-item">Item 2</div>
360+
<div class="list-group-item">Item 3</div>
361+
<div class="list-group-item">Item 4</div>
362+
<div class="list-group-item">Item 5</div>
363+
<div class="list-group-item">Item 6</div>
364+
</div>
365+
<div style="padding: 0" class="col-12">
366+
<pre class="prettyprint">new Sortable(multiDragDemo, {
367+
multiDrag: true, // Enable multi-drag
368+
selectedClass: 'selected', // The class applied to the selected items
369+
animation: 150
370+
});</pre>
371+
</div>
372+
</div>
373+
<hr />
374+
375+
<div id="swap" class="row">
376+
<h4 class="col-12">Swap</h4>
377+
<p class="col-12">The <a target="_blank" href="https://github.com/SortableJS/Sortable/tree/master/plugins/Swap">Swap</a> plugin changes the behaviour of Sortable to allow for items to be swapped with eachother rather than sorted.</p>
378+
<div id="swapDemo" class="list-group col">
379+
<div class="list-group-item">Item 1</div>
380+
<div class="list-group-item">Item 2</div>
381+
<div class="list-group-item">Item 3</div>
382+
<div class="list-group-item">Item 4</div>
383+
<div class="list-group-item">Item 5</div>
384+
<div class="list-group-item">Item 6</div>
385+
</div>
386+
<div style="padding: 0" class="col-12">
387+
<pre class="prettyprint">new Sortable(swapDemo, {
388+
swap: true, // Enable swap plugin
389+
swapClass: 'highlight', // The class applied to the hovered swap item
390+
animation: 150
391+
});</pre>
392+
</div>
332393
</div>
394+
<hr />
395+
396+
397+
398+
<div class="mt-4"></div>
399+
400+
<div id="comparisons" class="row">
401+
<h2 class="col-12">Comparisons</h2>
402+
</div>
403+
<hr />
404+
405+
406+
<div class="row frameworks">
407+
<h2 class="col-12 text-center">jQuery-UI</h2>
408+
<iframe class="mx-auto" src="https://player.vimeo.com/video/311581236?title=0&byline=0&portrait=0" width="640" height="361" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
409+
410+
<h2 class="col-12 text-center mt-5">Dragula</h2>
411+
<iframe class="mx-auto" src="https://player.vimeo.com/video/311584137?title=0&byline=0&portrait=0" width="640" height="361" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
412+
</div>
413+
333414
<div class="mt-4"></div>
334415

335416
<div id="frameworks" class="row">
@@ -346,7 +427,7 @@ <h3 class="col-6">React</h3>
346427
<h3 class="col-6"><a target="_blank" href="https://github.com/SortableJS/react-sortablejs">react-sortablejs</a></h3>
347428

348429
<h3 class="col-6">Angular</h3>
349-
<h3 class="col-6"><a target="_blank" href="https://github.com/SortableJS/angular-sortablejs">angular-sortablejs</a></h3>
430+
<h3 class="col-6"><a target="_blank" href="https://github.com/SortableJS/ngx-sortablejs">ngx-sortablejs</a></h3>
350431

351432
<h3 class="col-6">jQuery</h3>
352433
<h3 class="col-6"><a target="_blank" href="https://github.com/SortableJS/jquery-sortablejs">jquery-sortablejs</a></h3>
@@ -359,6 +440,9 @@ <h3 class="col-6"><a target="_blank" href="https://github.com/SortableJS/meteor-
359440

360441
<h3 class="col-6">Polymer</h3>
361442
<h3 class="col-6"><a target="_blank" href="https://github.com/SortableJS/polymer-sortablejs">polymer-sortablejs</a></h3>
443+
444+
<h3 class="col-6">Ember</h3>
445+
<h3 class="col-6"><a target="_blank" href="https://github.com/SortableJS/ember-sortablejs">ember-sortablejs</a></h3>
362446
</div>
363447

364448
</div>

‎st/app.js

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ var example1 = document.getElementById('example1'),
88
example5 = document.getElementById('example5'),
99
example6 = document.getElementById('example6'),
1010
example7 = document.getElementById('example7'),
11-
gridDemo = document.getElementById('gridDemo');
11+
gridDemo = document.getElementById('gridDemo'),
12+
multiDragDemo = document.getElementById('multiDragDemo'),
13+
swapDemo = document.getElementById('swapDemo');
1214

1315
// Example 1 - Simple list
1416
new Sortable(example1, {
@@ -194,9 +196,27 @@ new Sortable(gridDemo, {
194196
// Nested demo
195197
var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));
196198

199+
// Loop through each nested sortable element
197200
for (var i = 0; i < nestedSortables.length; i++) {
198201
new Sortable(nestedSortables[i], {
199202
group: 'nested',
200-
animation: 150
203+
animation: 150,
204+
fallbackOnBody: true,
205+
swapThreshold: 0.65
201206
});
202207
}
208+
209+
// MultiDrag demo
210+
new Sortable(multiDragDemo, {
211+
multiDrag: true,
212+
selectedClass: 'selected',
213+
animation: 150
214+
});
215+
216+
217+
// Swap demo
218+
new Sortable(swapDemo, {
219+
swap: true,
220+
swapClass: 'highlight',
221+
animation: 150
222+
});

‎st/theme.css

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ code {
122122
margin: 12px;
123123
}
124124

125-
#nestedDemo div, .nested-1, .nested-2, .nested-3 {
125+
.nested-sortable, .nested-1, .nested-2, .nested-3 {
126126
margin-top: 5px;
127127
}
128128

@@ -237,3 +237,18 @@ input[type=range]:focus::-ms-fill-upper {
237237
.blue-background-class {
238238
background-color: #C8EBFB;
239239
}
240+
241+
.col {
242+
padding-right: 0;
243+
margin-right: 15px;
244+
}
245+
246+
.selected {
247+
background-color: #f9c7c8;
248+
border: solid red 1px !important;
249+
z-index: 1 !important;
250+
}
251+
252+
.highlight {
253+
background-color: #B7F8C7;
254+
}

0 commit comments

Comments
 (0)