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-elements
CSS class to it.
-
Item 1
-
Item 2
-
Item 3
-
Item 4
-
Item 5
-
Item 6
-
Item 7
Portlets
Use the connectWith
JS parameter to allow sorting between columns as shown in the example below.
This content boxes has the header with .bg-primary class.
This content boxes has the header with .bg-primary class.
This content boxes has the header with .bg-primary class.
This content boxes has the header with .bg-primary class.
This content boxes has the header with .bg-primary class.
This content boxes has the header with .bg-primary class.
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.
-
Item 1
-
Item 2
Item 3
Item 4
-
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
-
Item 11
-
Item 12
-
Item 13
-
Item 14
-
Item 15
Item 16
Item 17
Item 18
Draggable Handles
If you're clever with your CSS and markup this can be achieved without any JavaScript changes.
-
Drag
Item 13
-
Drag
Item 14
-
Drag
Item 15
-
Drag
Item 16
-
Drag
Item 17
-
Drag
Item 18