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>
    </div>
    <div class="sortable-item">
        <div class="rich-list-item">
            ...
        </div>
    </div>
    <div class="sortable-item">
        <div class="rich-list-item">
            ...
        </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.