Sortable

Date:17.06.2021 6.17am

Simple

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

With Handle

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Filter

  • Cras justo odio
  • Filtered list not dragable
  • 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

Grid

  • Grid 01
  • Grid 02
  • Grid 03
  • Grid 04
  • Grid 05
  • Grid 06
  • Grid 07
  • Grid 08
  • Grid 09
  • Grid 10
  • Grid 11
  • Grid 12
  • Grid 13
  • Grid 14
  • Grid 15
  • Grid 16
  • Grid 17
  • Grid 18
  • Grid 19
  • Grid 20

Nested

  • Cras justo odio
  • Dapibus ac facilisis in
    • Cras justo odio
    • Dapibus ac facilisis in
      • Filtered list not dragable
      • Porta ac consectetur ac
    • Vestibulum at eros
  • Lorem ipsum dolor

How To Use

Basic Use HTML
<ul id="sortable-simple" class="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 sortableSimple = document.getElementById('sortable-simple');
new Sortable(sortableSimple,{
    animation:150,
});

For more Information please follow the Official Documentation

2021 ©By dedemao