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.

Learn more

How to use

  1. Install Sortable.js.

    Install Sortable.js via npm 

    npm i sortablejs

  2. Add the Sortable.js JavaScript

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

Example

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

  • Newsletter
  • Downloads
  • Team Account

Shared

Example of lists with shared items.

  • Newsletter
  • Downloads
  • Team Account
  • Questions
  • Settings
  • Activity

Handle

Ability to drag items only with a handler.

  • Newsletter
  • Downloads
  • Team Account

Nested

Nested sortables example.

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