• third party plugins
  • Drag & Drop

third party plugins

Tailwind CSS Drag & Drop

Implement drag-and-drop, reorderable lists for modern browsers and touch devices using Sortable.js.

Getting started

Setup

Below are the comprehensively outlined steps you can follow to seamlessly integrate SortableJs with FlyonUI.

  • 1
    Installation

    Install Install Sortable.js. using npm:

    npm install sortablejs
  • 2
    Include SortableJs JavaScript

    Include the following JS files in your page:

    <body>
  <script src="../path/to/vendor/sortablejs/Sortable.min.js"></script>
</body>
  • 3
    Initialize SortableJs

    Add the SortableJS initialization JavaScript code below the SortableJS JS library inclusion. Set up the Sortable instance to target elements using their id attribute.

    const example1 = document.querySelector('#example')
  Sortable.create(example1, {
    animation: 150,
});

Basic example

Simple list example

Here’s how a basic drag-and-drop list appears with the simplest markup.

Illustrations

Stats

These stats represent a real-time overview of key business metrics, including orders, revenue, invoices, and shipments

Images

This showcases a list of avatars with a drag-and-drop interaction, perfect for user selection or grouping.

Shared

Example of a shared task list with ‘Pending’ and ‘Completed’ tasks, each assigned to a user with an avatar.

Cloning

Example of a cloned task list with ‘Pending Tasks’ and ‘Completed Tasks’, each task assigned to a user with an avatar."

Disabled Sorting

Try sorting the pending tasks. It is not possible because it has it’s sort option set to false. However, you can still drag from the list on the pending tast to the list on the completed task.

Handle

Example of a list where items can be rearranged using a draggable handle, allowing only the handle to be used for drag-and-drop functionality.

Nested

Example of a nested list where you can drag and drop items to reorder them, even within different levels. Each item has a handle for easy dragging and rearranging.

Swap

The Swap plugin changes the behaviour of Sortable to allow for items to be swapped with eachother rather than sorted.