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

  • 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

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

2022 © Codecarnival