Third-Party Plugins

Tailwind CSS Drag and Drop

Sortable.js allows you to build drag-and-drop, reorderable lists that work seamlessly on modern browsers and touch devices.

Requires JS

This component requires the use of the third-party Sortable.js library.

How to use

  1. 1

    Install Sortable.js.

    IInstall Sortable.js via npm 
    npm i sortablejs
  2. 2

    Add the Sortable.js JavaScript

    Include the JavaScript script tag near the end of your body tag: 
    <script src="./assets/vendor/sortablejs/Sortable.min.js"></script>

make sure you have added a correct path of Sortable.min.js

Basic usage

Use following example of Tailwind Sortable to drag-and-drop functionality to your list.

  • List Item 1
  • List Item 2
  • List Item 3 
<ul id="Basic-sortable" class="max-w-xs flex flex-col">
    <li class="inline-flex items-center gap-x-3 py-3 px-4 cursor-grab text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg"> List Item 1</li>
    <li class="inline-flex items-center gap-x-3 py-3 px-4 cursor-grab text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg"> List Item 2</li>
    <li class="inline-flex items-center gap-x-3 py-3 px-4 cursor-grab text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg"> List Item 3</li>
</ul>
<script src="node_modules/sortablejs/Sortable.js"></script>
<script>
    window.addEventListener('load', () => {
        (function () {
            const sortable = document.querySelector("#Basic-sortable");
            new Sortable(sortable, {
                animation: 150,
                dragClass: '!rounded-none'
            });
        })();
    });
</script>

Shared

Use below example to show two different list of items and you can drag-and-drop between this shared list.

  • Newsletter
  • Downloads
  • Team Account
  • Questions
  • Settings
  • Activity 
<div class="flex flex-wrap space-y-5 lg:space-x-5 lg:space-y-0">
    <div class="flex-auto lg:flex-1 w-full lg:w-50">
        <ul id="left-sortable" class="flex flex-col">
            <li
                class="inline-flex items-center gap-x-3 py-3 px-4 cursor-grab text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                <svg class="shrink-0 size-4"
                    xmlns="http://www.w3.org/2000/svg" width="24"
                    height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9">
                    </path>
                    <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path>
                </svg>
                Newsletter
               
            </li>
            <li
                class="inline-flex items-center gap-x-3 py-3 px-4 cursor-grab text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                <svg class="shrink-0 size-4"
                    xmlns="http://www.w3.org/2000/svg" width="24"
                    height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path
                        d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242">
                    </path>
                    <path d="M12 12v9"></path>
                    <path d="m8 17 4 4 4-4"></path>
                </svg>
                Downloads
               
            </li>
            <li
                class="inline-flex items-center gap-x-3 py-3 px-4 cursor-grab text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                <svg class="shrink-0 size-4"
                    xmlns="http://www.w3.org/2000/svg" width="24"
                    height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2">
                    </path>
                    <circle cx="9" cy="7" r="4"></circle>
                    <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                </svg>
                Team Account
               
            </li>
        </ul>
    </div>
    <div class="flex-auto lg:flex-1 w-full lg:w-50">
        <ul id="right-sortable" class="flex flex-col">
            <li
                class="inline-flex items-center gap-x-3 py-3 px-4 cursor-grab text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                <svg class="shrink-0 size-4"
                    xmlns="http://www.w3.org/2000/svg" width="24"
                    height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3">
                    </path>
                    <path d="M12 17h.01"></path>
                </svg>
                Questions
               
            </li>
            <li
                class="inline-flex items-center gap-x-3 py-3 px-4 cursor-grab text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                <svg class="shrink-0 size-4"
                    xmlns="http://www.w3.org/2000/svg" width="24"
                    height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="18" cy="15" r="3"></circle>
                    <circle cx="9" cy="7" r="4"></circle>
                    <path d="M10 15H6a4 4 0 0 0-4 4v2"></path>
                    <path d="m21.7 16.4-.9-.3"></path>
                    <path d="m15.2 13.9-.9-.3"></path>
                    <path d="m16.6 18.7.3-.9"></path>
                    <path d="m19.1 12.2.3-.9"></path>
                    <path d="m19.6 18.7-.4-1"></path>
                    <path d="m16.8 12.3-.4-1"></path>
                    <path d="m14.3 16.6 1-.4"></path>
                    <path d="m20.7 13.8 1-.4"></path>
                </svg>
                Settings
               
            </li>
            <li
                class="inline-flex items-center gap-x-3 py-3 px-4 cursor-grab text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                <svg class="shrink-0 size-4"
                    xmlns="http://www.w3.org/2000/svg" width="24"
                    height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
                </svg>
                Activity
               
            </li>
        </ul>
    </div>
</div>
<script src="node_modules/sortablejs/Sortable.js"></script>
<script>
    window.addEventListener('load', () => {
        (function () {
            const sortableLeft = document.querySelector("#left-sortable");
            const sortableRight = document.querySelector("#right-sortable");
            const options = {
                group: 'shared',
                animation: 150,
                dragClass: '!rounded-none'
            };

            new Sortable(sortableLeft, options);
            new Sortable(sortableRight, options);
        })();
    });
</script>

Handle

Use following example to drag-and-drop list using handles.

  • Newsletter
  • Downloads
  • Team Account 
<ul id="Trigger-sortable" class="max-w-xs flex flex-col">
    <li class="inline-flex items-center gap-x-3 py-3 px-4 text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
        <svg class="Trigger cursor-grab shrink-0 size-4 text-gray-500 dark:text-neutral-500" width="24px" height="24px" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M12 3.84937V21.8494M12 3.84937L9 5.84937M12 3.84937L15 5.84937M12 21.8494L15 19.8494M12 21.8494L9 19.8494M21 12.8494L3 12.8494M21 12.8494L19 9.84936M21 12.8494L19 15.8494M3 12.8494L5 15.8494M3 12.8494L5 9.84936"
                stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
        </svg>
        Newsletter
    </li>
    <li class="inline-flex items-center gap-x-3 py-3 px-4 text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
        <svg class="Trigger cursor-grab shrink-0 size-4 text-gray-500 dark:text-neutral-500" width="24px" height="24px" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M12 3.84937V21.8494M12 3.84937L9 5.84937M12 3.84937L15 5.84937M12 21.8494L15 19.8494M12 21.8494L9 19.8494M21 12.8494L3 12.8494M21 12.8494L19 9.84936M21 12.8494L19 15.8494M3 12.8494L5 15.8494M3 12.8494L5 9.84936"
                stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
        </svg>
        Downloads
    </li>
    <li class="inline-flex items-center gap-x-3 py-3 px-4 text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
        <svg class="Trigger cursor-grab shrink-0 size-4 text-gray-500 dark:text-neutral-500" width="24px" height="24px" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M12 3.84937V21.8494M12 3.84937L9 5.84937M12 3.84937L15 5.84937M12 21.8494L15 19.8494M12 21.8494L9 19.8494M21 12.8494L3 12.8494M21 12.8494L19 9.84936M21 12.8494L19 15.8494M3 12.8494L5 15.8494M3 12.8494L5 9.84936"
                stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
        </svg>
        Team Account
    </li>
</ul>
<script src="node_modules/sortablejs/Sortable.js"></script>
<script>
window.addEventListener('load', () => {
(function () {
const sortable = document.querySelector("#Trigger-sortable");

new Sortable(sortable, {
animation: 150,
handle: '.Trigger',
dragClass: '!rounded-none'
});
})();
});
</script>

Nested Sortable

Below example can be used to show nested sortable items list.

Item 1.1
Item 2.1
Item 2.2
Item 3.1
Item 3.2
Item 3.3
Item 3.4
Item 2.3
Item 2.4
Item 1.2
Item 1.3
Item 1.4
Item 2.1
Item 2.2
Item 2.3
Item 2.4
Item 1.5 
<div id="nested-sortable-Wrapper">
    <div class="nested-sortable space-y-1">
        <div class="nested-1 space-y-1">
            <div
                class="p-3 flex items-center gap-x-3 cursor-grab bg-white border border-gray-200 rounded-lg font-medium text-sm text-gray-800 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
                Item 1.1
                <svg class="shrink-0 size-4 ms-auto text-gray-500 dark:text-neutral-500"
                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="9" cy="12" r="1"></circle>
                    <circle cx="9" cy="5" r="1"></circle>
                    <circle cx="9" cy="19" r="1"></circle>
                    <circle cx="15" cy="12" r="1"></circle>
                    <circle cx="15" cy="5" r="1"></circle>
                    <circle cx="15" cy="19" r="1"></circle>
                </svg>
            </div>

            <div class="ps-5 space-y-1 nested-sortable">
                <div class="nested-2">
                    <div
                        class="p-3 flex items-center gap-x-3 cursor-grab bg-white border border-gray-200 rounded-lg font-medium text-sm text-gray-800 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
                        Item 2.1
                        <svg class="shrink-0 size-4 ms-auto text-gray-500 dark:text-neutral-500"
                            xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="9" cy="12" r="1"></circle>
                            <circle cx="9" cy="5" r="1"></circle>
                            <circle cx="9" cy="19" r="1"></circle>
                            <circle cx="15" cy="12" r="1"></circle>
                            <circle cx="15" cy="5" r="1"></circle>
                            <circle cx="15" cy="19" r="1"></circle>
                        </svg>
                    </div>
                </div>

                <div class="nested-2 space-y-1">
                    <div
                        class="p-3 flex items-center gap-x-3 cursor-grab bg-white border border-gray-200 rounded-lg font-medium text-sm text-gray-800 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
                        Item 2.2
                        <svg class="shrink-0 size-4 ms-auto text-gray-500 dark:text-neutral-500"
                            xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="9" cy="12" r="1"></circle>
                            <circle cx="9" cy="5" r="1"></circle>
                            <circle cx="9" cy="19" r="1"></circle>
                            <circle cx="15" cy="12" r="1"></circle>
                            <circle cx="15" cy="5" r="1"></circle>
                            <circle cx="15" cy="19" r="1"></circle>
                        </svg>
                    </div>

                    <div class="ps-5 space-y-1 nested-sortable">
                        <div class="nested-3">
                            <div
                                class="p-3 flex items-center gap-x-3 cursor-grab bg-white border border-gray-200 rounded-lg font-medium text-sm text-gray-800 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
                                Item 3.1
                                <svg class="shrink-0 size-4 ms-auto text-gray-500 dark:text-neutral-500"
                                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round">
                                    <circle cx="9" cy="12" r="1">
                                    </circle>
                                    <circle cx="9" cy="5" r="1">
                                    </circle>
                                    <circle cx="9" cy="19" r="1">
                                    </circle>
                                    <circle cx="15" cy="12" r="1">
                                    </circle>
                                    <circle cx="15" cy="5" r="1">
                                    </circle>
                                    <circle cx="15" cy="19" r="1">
                                    </circle>
                                </svg>
                            </div>
                        </div>
                        <div class="nested-3">
                            <div
                                class="p-3 flex items-center gap-x-3 cursor-grab bg-white border border-gray-200 rounded-lg font-medium text-sm text-gray-800 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
                                Item 3.2
                                <svg class="shrink-0 size-4 ms-auto text-gray-500 dark:text-neutral-500"
                                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round">
                                    <circle cx="9" cy="12" r="1">
                                    </circle>
                                    <circle cx="9" cy="5" r="1">
                                    </circle>
                                    <circle cx="9" cy="19" r="1">
                                    </circle>
                                    <circle cx="15" cy="12" r="1">
                                    </circle>
                                    <circle cx="15" cy="5" r="1">
                                    </circle>
                                    <circle cx="15" cy="19" r="1">
                                    </circle>
                                </svg>
                            </div>
                        </div>
                        <div class="nested-3">
                            <div
                                class="p-3 flex items-center gap-x-3 cursor-grab bg-white border border-gray-200 rounded-lg font-medium text-sm text-gray-800 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
                                Item 3.3
                                <svg class="shrink-0 size-4 ms-auto text-gray-500 dark:text-neutral-500"
                                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round">
                                    <circle cx="9" cy="12" r="1">
                                    </circle>
                                    <circle cx="9" cy="5" r="1">
                                    </circle>
                                    <circle cx="9" cy="19" r="1">
                                    </circle>
                                    <circle cx="15" cy="12" r="1">
                                    </circle>
                                    <circle cx="15" cy="5" r="1">
                                    </circle>
                                    <circle cx="15" cy="19" r="1">
                                    </circle>
                                </svg>
                            </div>
                        </div>
                        <div class="nested-3">
                            <div
                                class="p-3 flex items-center gap-x-3 cursor-grab bg-white border border-gray-200 rounded-lg font-medium text-sm text-gray-800 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
                                Item 3.4
                                <svg class="shrink-0 size-4 ms-auto text-gray-500 dark:text-neutral-500"
                                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round">
                                    <circle cx="9" cy="12" r="1">
                                    </circle>
                                    <circle cx="9" cy="5" r="1">
                                    </circle>
                                    <circle cx="9" cy="19" r="1">
                                    </circle>
                                    <circle cx="15" cy="12" r="1">
                                    </circle>
                                    <circle cx="15" cy="5" r="1">
                                    </circle>
                                    <circle cx="15" cy="19" r="1">
                                    </circle>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="nested-2">
                    <div
                        class="p-3 flex items-center gap-x-3 cursor-grab bg-white border border-gray-200 rounded-lg font-medium text-sm text-gray-800 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
                        Item 2.3
                        <svg class="shrink-0 size-4 ms-auto text-gray-500 dark:text-neutral-500"
                            xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="9" cy="12" r="1"></circle>
                            <circle cx="9" cy="5" r="1"></circle>
                            <circle cx="9" cy="19" r="1"></circle>
                            <circle cx="15" cy="12" r="1"></circle>
                            <circle cx="15" cy="5" r="1"></circle>
                            <circle cx="15" cy="19" r="1"></circle>
                        </svg>
                    </div>
                </div>
                <div class="nested-2">
                    <div
                        class="p-3 flex items-center gap-x-3 cursor-grab bg-white border border-gray-200 rounded-lg font-medium text-sm text-gray-800 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
                        Item 2.4
                        <svg class="shrink-0 size-4 ms-auto text-gray-500 dark:text-neutral-500"
                            xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="9" cy="12" r="1"></circle>
                            <circle cx="9" cy="5" r="1"></circle>
                            <circle cx="9" cy="19" r="1"></circle>
                            <circle cx="15" cy="12" r="1"></circle>
                            <circle cx="15" cy="5" r="1"></circle>
                            <circle cx="15" cy="19" r="1"></circle>
                        </svg>
                    </div>
                </div>
            </div>
        </div>

        <div class="nested-1">
            <div
                class="p-3 flex items-center gap-x-3 cursor-grab bg-white border border-gray-200 rounded-lg font-medium text-sm text-gray-800 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
                Item 1.2
                <svg class="shrink-0 size-4 ms-auto text-gray-500 dark:text-neutral-500"
                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="9" cy="12" r="1"></circle>
                    <circle cx="9" cy="5" r="1"></circle>
                    <circle cx="9" cy="19" r="1"></circle>
                    <circle cx="15" cy="12" r="1"></circle>
                    <circle cx="15" cy="5" r="1"></circle>
                    <circle cx="15" cy="19" r="1"></circle>
                </svg>
            </div>
        </div>
        <div class="nested-1">
            <div
                class="p-3 flex items-center gap-x-3 cursor-grab bg-white border border-gray-200 rounded-lg font-medium text-sm text-gray-800 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
                Item 1.3
                <svg class="shrink-0 size-4 ms-auto text-gray-500 dark:text-neutral-500"
                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="9" cy="12" r="1"></circle>
                    <circle cx="9" cy="5" r="1"></circle>
                    <circle cx="9" cy="19" r="1"></circle>
                    <circle cx="15" cy="12" r="1"></circle>
                    <circle cx="15" cy="5" r="1"></circle>
                    <circle cx="15" cy="19" r="1"></circle>
                </svg>
            </div>
        </div>

        <div class="nested-1 space-y-1">
            <div
                class="p-3 flex items-center gap-x-3 cursor-grab bg-white border border-gray-200 rounded-lg font-medium text-sm text-gray-800 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
                Item 1.4
                <svg class="shrink-0 size-4 ms-auto text-gray-500 dark:text-neutral-500"
                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="9" cy="12" r="1"></circle>
                    <circle cx="9" cy="5" r="1"></circle>
                    <circle cx="9" cy="19" r="1"></circle>
                    <circle cx="15" cy="12" r="1"></circle>
                    <circle cx="15" cy="5" r="1"></circle>
                    <circle cx="15" cy="19" r="1"></circle>
                </svg>
            </div>

            <div class="ps-5 space-y-1 nested-sortable">
                <div class="nested-2">
                    <div
                        class="p-3 flex items-center gap-x-3 cursor-grab bg-white border border-gray-200 rounded-lg font-medium text-sm text-gray-800 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
                        Item 2.1
                        <svg class="shrink-0 size-4 ms-auto text-gray-500 dark:text-neutral-500"
                            xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="9" cy="12" r="1"></circle>
                            <circle cx="9" cy="5" r="1"></circle>
                            <circle cx="9" cy="19" r="1"></circle>
                            <circle cx="15" cy="12" r="1"></circle>
                            <circle cx="15" cy="5" r="1"></circle>
                            <circle cx="15" cy="19" r="1"></circle>
                        </svg>
                    </div>
                </div>
                <div class="nested-2">
                    <div
                        class="p-3 flex items-center gap-x-3 cursor-grab bg-white border border-gray-200 rounded-lg font-medium text-sm text-gray-800 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
                        Item 2.2
                        <svg class="shrink-0 size-4 ms-auto text-gray-500 dark:text-neutral-500"
                            xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="9" cy="12" r="1"></circle>
                            <circle cx="9" cy="5" r="1"></circle>
                            <circle cx="9" cy="19" r="1"></circle>
                            <circle cx="15" cy="12" r="1"></circle>
                            <circle cx="15" cy="5" r="1"></circle>
                            <circle cx="15" cy="19" r="1"></circle>
                        </svg>
                    </div>
                </div>
                <div class="nested-2">
                    <div
                        class="p-3 flex items-center gap-x-3 cursor-grab bg-white border border-gray-200 rounded-lg font-medium text-sm text-gray-800 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
                        Item 2.3
                        <svg class="shrink-0 size-4 ms-auto text-gray-500 dark:text-neutral-500"
                            xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="9" cy="12" r="1"></circle>
                            <circle cx="9" cy="5" r="1"></circle>
                            <circle cx="9" cy="19" r="1"></circle>
                            <circle cx="15" cy="12" r="1"></circle>
                            <circle cx="15" cy="5" r="1"></circle>
                            <circle cx="15" cy="19" r="1"></circle>
                        </svg>
                    </div>
                </div>
                <div class="nested-2">
                    <div
                        class="p-3 flex items-center gap-x-3 cursor-grab bg-white border border-gray-200 rounded-lg font-medium text-sm text-gray-800 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
                        Item 2.4
                        <svg class="shrink-0 size-4 ms-auto text-gray-500 dark:text-neutral-500"
                            xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="9" cy="12" r="1"></circle>
                            <circle cx="9" cy="5" r="1"></circle>
                            <circle cx="9" cy="19" r="1"></circle>
                            <circle cx="15" cy="12" r="1"></circle>
                            <circle cx="15" cy="5" r="1"></circle>
                            <circle cx="15" cy="19" r="1"></circle>
                        </svg>
                    </div>
                </div>
            </div>
        </div>

        <div class="nested-1">
            <div
                class="p-3 flex items-center gap-x-3 cursor-grab bg-white border border-gray-200 rounded-lg font-medium text-sm text-gray-800 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
                Item 1.5
                <svg class="shrink-0 size-4 ms-auto text-gray-500 dark:text-neutral-500"
                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="9" cy="12" r="1"></circle>
                    <circle cx="9" cy="5" r="1"></circle>
                    <circle cx="9" cy="19" r="1"></circle>
                    <circle cx="15" cy="12" r="1"></circle>
                    <circle cx="15" cy="5" r="1"></circle>
                    <circle cx="15" cy="19" r="1"></circle>
                </svg>
            </div>
        </div>
    </div>
</div>
<script src="node_modules/sortablejs/Sortable.js"></script>
<script>
window.addEventListener('load', () => {
(function () {
const sortables = document.querySelectorAll("#nested-sortable-Wrapper .nested-sortable");

for (var i = 0; i < sortables.length; i++) { new Sortable(sortables[i], { group: 'nested' , animation: 150,
    fallbackOnBody: true, swapThreshold: 0.65 }); 
} 
})(); 
}); </script>