Sortable
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
SortableBasic Example
Hare is the basic example of sortableJs. You can drag sortable items between the same group. Use data-sortable attribute to get default behavior. We have also designed our Kanban Board usign SortableJS libarary.
<div class="row">
<div class="col-6" data-sortable="data-sortable">
<div class="sortable-item-wrapper mb-3">
<p class="mb-0 sortable-item bg-body-highlight p-3 rounded-3">Item1</p>
</div>
<div class="sortable-item-wrapper mb-3">
<p class="mb-0 sortable-item bg-body-highlight p-3 rounded-3">Item2</p>
</div>
<div class="sortable-item-wrapper mb-3">
<p class="mb-0 sortable-item bg-body-highlight p-3 rounded-3">Item3</p>
</div>
</div>
<div class="col-6" data-sortable="data-sortable">
<div class="sortable-item-wrapper mb-3">
<p class="mb-0 sortable-item bg-body-highlight p-3 rounded-3">Item4</p>
</div>
<div class="sortable-item-wrapper mb-3">
<p class="mb-0 sortable-item bg-body-highlight p-3 rounded-3">Item5</p>
</div>
</div>
</div>Item1
Item2
Item3
Item4
Item5
User Options
You can pass sortable options through data-sortable attribute like data-sortable="{"group":"example","animation":150}"
<div class="row">
<div class="col-6" data-sortable='{"group":"example","animation":150}'>
<div class="sortable-item-wrapper mb-3">
<p class="mb-0 sortable-item bg-body-highlight p-3 rounded-3">Item1</p>
</div>
<div class="sortable-item-wrapper mb-3">
<p class="mb-0 sortable-item bg-body-highlight p-3 rounded-3">Item2</p>
</div>
<div class="sortable-item-wrapper mb-3">
<p class="mb-0 sortable-item bg-body-highlight p-3 rounded-3">Item3</p>
</div>
</div>
<div class="col-6" data-sortable='{"group":"example","animation":150}'>
<div class="sortable-item-wrapper mb-3">
<p class="mb-0 sortable-item bg-body-highlight p-3 rounded-3">Item4</p>
</div>
<div class="sortable-item-wrapper mb-3">
<p class="mb-0 sortable-item bg-body-highlight p-3 rounded-3">Item5</p>
</div>
</div>
</div>Item1
Item2
Item3
Item4
Item5
Javascript
<pre><code class="language-html"> <script src="vendors/sortablejs/Sortable.min.js"></script></code></pre> <script src="vendors/sortablejs/Sortable.min.js"></script>
