1. Components
  2. Sortable.js

Third-Party Plugins

Tailwind CSS Drag and Drop

Use Sortable.js to create drag-and-drop, reorderable lists for modern browsers and touch devices.

Requires Additional Installation

Note that this component requires the use of the third-party Sortable.js library.

How to use

  1. Install Sortable.js.

    Install Sortable.js via npm

    Terminal
                          
                            npm i sortablejs
                          
                        
  2. Add the Sortable.js JavaScript

    Include the JavaScript <script> near the end of your </body> tag:

    HTML
                          
                        

Example

Using the most basic markup for drag-and-drop, here's how list look.

Theme:

Shared

Example of lists with shared items.

Theme:

Handle

Ability to drag items only with a handler.

Theme:

Nested

Nested sortables example.

Theme: