Elements / List Sortable
Simple
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Handle
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Shared
Cloning
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Disabling Sorting
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Filter
- Cras justo odio
- Dapibus ac facilisis in
- Filtered list not dragable
- Porta ac consectetur ac
- Vestibulum at eros
Grid
- Grid 1
- Grid 2
- Grid 3
- Grid 4
- Grid 5
- Grid 6
- Grid 7
- Grid 8
- Grid 9
- Grid 10
- Grid 11
- Grid 12
- Grid 13
- Grid 14
- Grid 15
- Grid 16
- Grid 17
- Grid 18
- Grid 19
- Grid 20
Nested Sortables
- Cras justo odio
- Dapibus ac facilisis in
- Cras justo odio
- Dapibus ac facilisis in
- Filtered list not dragable
- Porta ac consectetur ac
- Cras justo odio
- Dapibus ac facilisis in
- Filtered list not dragable
- Porta ac consectetur ac
- Vestibulum at eros
- Vestibulum at eros
- Lorem ipsum dolor
How To Use
Basic Use HTML
<ul id="simple-sortable" class="sortable simple-sortable list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Js Activation
var simpleSorting = document.getElementById('simple-sortable');
new Sortable(simpleSorting, {
animation: 150,
});
For more Information please follow the Official Documentation