Sortable
Sortable
Use SortableJS to create drag-and-drop lists or grids that can be reordered dynamically. It works with any HTML structure and is lightweight, responsive, and touch-friendly.
Step 1: Install SortableJS
You can install SortableJS via yarn.
yarn add sortablejs
Step 2: Include SortableJS Script
Include the SortableJS library by adding the script from your local libs folder or via CDN.
<!-- SortableJS Library -->
<script src="../assets/libs/sortablejs/Sortable.min.js"></script>
Step 3: Add HTML List
Create a container with the sortable class. Each item should have the sortable-item class for proper dragging behavior.
<div class="sortable rich-list-bordered" id="sortable-1">
<div class="sortable-item">
<div class="rich-list-item">
<div class="rich-list-content">
<h6 class="rich-list-title">List 1</h6>
<span class="rich-list-subtitle">Cras justo odio</span>
</div>
</div>
</div>
<div class="sortable-item">
<div class="rich-list-item">
<div class="rich-list-content">
<h6 class="rich-list-title">List 2</h6>
<span class="rich-list-subtitle">Dapibus ac facilisis in</span>
</div>
</div>
</div>
<div class="sortable-item">
<div class="rich-list-item">
<div class="rich-list-content">
<h6 class="rich-list-title">List 3</h6>
<span class="rich-list-subtitle">Morbi leo risus</span>
</div>
</div>
</div>
</div>
Step 4: Initialize Sortable
Use the following JavaScript code to make the list sortable.
"use strict";
$(function () {
new Sortable(document.getElementById("sortable-1"));
});
For advanced options, events, and multi-container support, check the SortableJS documentation.