Loading...

Sortable elements View all kinds of Sortable elements examples below.

Sortable elements

Enable a group of elements to be sortable.

Basic

Click on and drag an element to a new spot within the list, and the other items will adjust to fit. To make a list sortable add the .sortable-elementsCSS class to it.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7

Portlets

Use the connectWithJS parameter to allow sorting between columns as shown in the example below.

Portlet header 1

This content boxes has the header with .bg-primaryclass.

Portlet header 2

This content boxes has the header with .bg-primaryclass.

Portlet header 3

This content boxes has the header with .bg-primaryclass.

Portlet header 4

This content boxes has the header with .bg-primaryclass.

Portlet header 5

This content boxes has the header with .bg-primaryclass.

Portlet header 6

This content boxes has the header with .bg-primaryclass.

Nestable lists

Drag & drop hierarchical list with mouse and touch compatibility.

Basic

Click on and drag an element to a new spot within the list, and the other items will adjust to fit.

  1. Item 1
  2. Item 2
    1. Item 3
    2. Item 4
    3. Item 5
      1. Item 6
      2. Item 7
      3. Item 8
    4. Item 9
    5. Item 10
  3. Item 11
  4. Item 12
  1. Item 13
  2. Item 14
  3. Item 15
    1. Item 16
    2. Item 17
    3. Item 18

Draggable Handles

If you're clever with your CSS and markup this can be achieved without any JavaScript changes.

  1. Drag
    Item 13
  2. Drag
    Item 14
  3. Drag
    Item 15
    1. Drag
      Item 16
    2. Drag
      Item 17
    3. Drag
      Item 18
Online
Idle
Offline
Cloud status
Latest transfers
Tasks for today
Pending notifications New