How to use

Sortable is a JavaScript library for reorderable drag-and-drop lists.

<!-- HTML -->
<ul class="list-unstyled" id="items">
	<li class="card mb-1 theme-color1 text-white"><div class="card-body">item 1</div></li>
	<li class="card mb-1 theme-color2 text-white"><div class="card-body">item 2</div></li>
	<li class="card mb-1 theme-color3 text-white"><div class="card-body">item 3</div></li>
	<li class="card mb-1 theme-color4 text-white"><div class="card-body">item 4</div></li>
	<li class="card mb-1 theme-color5 text-white"><div class="card-body">item 5</div></li>
	<li class="card mb-1 theme-color6 text-white"><div class="card-body">item 6</div></li>
</ul>

<!-- JavaScript -->
<script >
	// Simple list
	var el = document.getElementById('items');
	var sortable = Sortable.create(el);
</script>
Simple list
  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  • item 6
Handle
  • A list item 14
  • A second list item 2
  • A third list item 1
Shared lists
List 1
  • Item 1
  • Item 2
  • Item 3
  • Item 4
List 1
  • Item 5
Template Setting
Set Theme Color
Template Layouts
Icon Border Stroke
Layout Section Ligh/Dark
More App Setting