Implementing a jQuery UI Sortable List: A Comprehensive Guide

Introduction to jQuery UI Sortable

A sortable list allows users to rearrange elements by dragging and dropping them. This is useful in task lists, dashboards, to-do lists, and admin panels where users want to reorder items dynamically.

jQuery UI Sortable is a powerful and easy-to-use drag-and-drop sorting plugin that makes elements within a container sortable using just a few lines of JavaScript.

Benefits of Using jQuery UI Sortable

✅ Drag and drop sorting – Enables easy reordering of items.
✅ Customizable behavior – Control sorting, placeholders, and animations.
✅ Supports multiple lists – Allows moving items between multiple lists.
✅ Works with AJAX – Can save order dynamically in a database.
✅ Lightweight & efficient – Uses minimal code with high performance.

1. Setting Up jQuery UI

To use jQuery UI Sortable, we need to include:

jQuery (core library)
jQuery UI (for sortable functionality)

Include jQuery and jQuery UI in Your Project

There are two ways to include jQuery UI:

Using a CDN (Recommended for quick setup)

<!-- jQuery Library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- jQuery UI Library -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- jQuery UI CSS -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">

Download and Host Locally
- Download jQuery UI from jqueryui.com/download
- Include the files in your project:
<script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <link rel="stylesheet" href="css/jquery-ui.min.css">

2. Creating the Sortable List

Now, let’s define an unordered list (UL) with list items (<li>) inside.

Basic HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sortable List Example</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #sortable {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 300px;
        }
        #sortable li {
            padding: 10px;
            margin: 5px;
            background: #f4f4f4;
            border: 1px solid #ccc;
            cursor: move;
        }
    </style>
</head>
<body>

    <h2>Sortable List Example</h2>
    <ul id="sortable">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>

    <script>
        $(document).ready(function() {
            $("#sortable").sortable();
        });
    </script>

</body>
</html>

Explanation:

✔ Unordered List (<ul>): Contains sortable items.
✔ List Items (<li>): Items that can be dragged and dropped.
✔ CSS Styling: Adds padding, margin, and background color to make items visually appealing.
✔ jQuery UI Sortable: $("#sortable").sortable(); activates sorting functionality.

🔹 Now, you can drag and reorder the list items with your mouse! 🎉

3. Enhancing the Sortable List

We can customize the sortable behavior by adding different options.

3.1. Adding a Handle for Dragging

Instead of dragging the entire item, let’s add a drag handle.

Updated HTML with a Handle

<ul id="sortable">
    <li><span class="handle">☰</span> Item 1</li>
    <li><span class="handle">☰</span> Item 2</li>
    <li><span class="handle">☰</span> Item 3</li>
    <li><span class="handle">☰</span> Item 4</li>
    <li><span class="handle">☰</span> Item 5</li>
</ul>

CSS for Handle

.handle {
    cursor: grab;
    margin-right: 10px;
}

JavaScript to Enable Handle

$(document).ready(function() {
    $("#sortable").sortable({
        handle: ".handle"
    });
});

🎯 Now, users can only drag items using the handle (☰).

3.2. Adding a Placeholder Effect

The placeholder effect makes sorting more intuitive by showing a ghost preview while dragging.

JavaScript for Placeholder

$(document).ready(function() {
    $("#sortable").sortable({
        placeholder: "sortable-placeholder"
    });
});

CSS for Placeholder

.sortable-placeholder {
    background: #ffeb3b;
    height: 40px;
    border: 2px dashed #333;
}

🎯 Now, when you drag an item, a yellow dashed placeholder appears!

3.3. Connecting Multiple Sortable Lists

We can allow items to be moved between multiple lists.

HTML: Two Lists

<ul id="sortable1" class="connected">
    <li>Task A</li>
    <li>Task B</li>
</ul>

<ul id="sortable2" class="connected">
    <li>Task C</li>
    <li>Task D</li>
</ul>

JavaScript for Connected Lists

$(document).ready(function() {
    $(".connected").sortable({
        connectWith: ".connected"
    });
});

🎯 Now, you can move tasks between both lists!

4. Saving the Sorted Order with AJAX

To save the new order in a database, we use AJAX.

JavaScript to Send Data

$(document).ready(function() {
    $("#sortable").sortable({
        update: function(event, ui) {
            var sortedIDs = $("#sortable").sortable("toArray");
            $.post("save_order.php", { order: sortedIDs });
        }
    });
});

PHP Script (save_order.php)

<?php
if(isset($_POST['order'])) {
    $order = $_POST['order'];
    file_put_contents("order.txt", implode(",", $order));
    echo "Order Saved!";
}
?>

🎯 Now, every time the user reorders items, the new order is saved in order.txt.

We successfully implemented a sortable list using jQuery UI, including: ✅ Basic drag-and-drop sorting
✅ Custom handles
✅ Placeholder effects
✅ Multiple connected lists
✅ Saving order via AJAX

Would you like to extend this with database integration and custom animations?