Complete Guide: How to Easily Create Drag & Drop Nested Lists with jQuery.nestable.js

One handy tool in web development is jquery.nestable.js, which lets you dynamically change the order of lists. In this article, we introduce a feature that allows users to freely reorder list items (li tags) via drag-and-drop. We’ll also explain how to output the updated order in JSON format. This greatly enhances data management and user interaction on your website.

Getting Started: Basics of jquery.nestable.js

jquery.nestable.js is a JavaScript library that displays HTML list elements in a nested structure and lets you edit their order via drag-and-drop. This is useful in many scenarios, such as prioritizing tasks in a to-do list or managing categories in an admin panel.

Styling with CSS

The following basic CSS tidies up the appearance of the lists. The .dd class indicates the list container, and the .dd-handle class represents the “grabbable” part of each list item. Dragging this part with the mouse enables drag-and-drop operations.
Here is the CSS for the li list area (.nestable-lists) and the JSON output area (#nestable-output).

HTML Structure

The following HTML markup shows a draggable list and the data output in JSON format. The div with #nestable is the list container, and #nestable-output is the output target for the list data.
Prepare the li list area (class="nestable-lists"), the JSON output area (id="nestable-output"), and the expand/collapse buttons (id="nestable-menu").

<h1>Make a nested list of li tags draggable with jquery.nestable.js.<br>Also, output the data-id values of li tags in JSON format.</h1>

<menu id="nestable-menu">
    <button type="button" data-action="expand-all">Expand All</button>
    <button type="button" data-action="collapse-all">Collapse</button>
</menu>

<div class="cf nestable-lists">

    <div class="dd" id="nestable">
        <ol class="dd-list">
            <li class="dd-item" data-id="1">
                <div class="dd-handle">Item 1</div>
            </li>
            <li class="dd-item" data-id="2">
                <div class="dd-handle">Item 2</div>
                <ol class="dd-list">
                    <li class="dd-item" data-id="3"><div class="dd-handle">Item 3</div></li>
                    <li class="dd-item" data-id="4"><div class="dd-handle">Item 4</div></li>
                    <li class="dd-item" data-id="5">
                        <div class="dd-handle">Item 5</div>
                        <ol class="dd-list">
                            <li class="dd-item" data-id="6"><div class="dd-handle">Item 6</div></li>
                            <li class="dd-item" data-id="7"><div class="dd-handle">Item 7</div></li>
                            <li class="dd-item" data-id="8"><div class="dd-handle">Item 8</div></li>
                        </ol>
                    </li>
                    <li class="dd-item" data-id="9"><div class="dd-handle">Item 9</div></li>
                    <li class="dd-item" data-id="10"><div class="dd-handle">Item 10</div></li>
                </ol>
            </li>
            <li class="dd-item" data-id="11">
                <div class="dd-handle">Item 11</div>
            </li>
            <li class="dd-item" data-id="12">
                <div class="dd-handle">Item 12</div>
            </li>
        </ol>
    </div>

</div><!--/.nestable-lists-->

<br>
<br>
<div align="center">Output result of li tag data-id<br>Dragging the above li tags also changes the output order below.</div>
<textarea id="nestable-output"></textarea>

JavaScript Code

The following JavaScript initializes the list with jquery.nestable.js and outputs changes in JSON format.
Load jquery-3.1.1.min.js and jquery.nestable.js. Using $('li list area').nestable({group}), activate the Nestable plugin. At the “initial serialized data output” part, the li tag data-id values are output in JSON format. The expand/collapse buttons control nested list expansion and collapsing.

<script src="jquery-3.1.1.min.js"></script>
<script src="jquery.nestable.js"></script>
<script>
$(document).ready(function()
{
    var updateOutput = function(e)
    {
        var list   = e.length ? e : $(e.target),
            output = list.data('output');
        if (window.JSON) {
            output.val(window.JSON.stringify(list.nestable('serialize')));
        } else {
            output.val('This demo requires browser support for JSON.');
        }
    };

    // Activate Nestable
    $('#nestable').nestable({
        group: 1
    })
    .on('change', updateOutput);

    // Output initial serialized data
    updateOutput($('#nestable').data('output', $('#nestable-output')));

    $('#nestable-menu').on('click', function(e)
    {
        var target = $(e.target),
            action = target.data('action');
        if (action === 'expand-all') {
            $('.dd').nestable('expandAll');
        }
        if (action === 'collapse-all') {
            $('.dd').nestable('collapseAll');
        }
    });
});
</script>

Demo Page: Drag & Drop Nested Lists with jquery.nestable.js

You can view the demo page implemented below:

Demo page for draggable nested lists using jquery.nestable.js

Source: Nestable

Nestable

Practical Uses and Applications

This technology can be applied to any application where users need to intuitively manage the order of data, such as CMS, project management tools, or educational tools. It is particularly effective for managing order-sensitive information such as article sections or course modules.

Conclusion

jquery.nestable.js is a simple yet powerful library that makes list management and interaction on the web more intuitive and efficient. Use this tool to provide a better web experience for your users.

※ If reused, please do so at your own responsibility.
Do not copy the Google Analytics tag in the head of the demo page.