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.
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.