• Since the Drag & Drop is not available in the Lite version, sortable will use buttons instead of drag and drop
  • The JavaScript Sortable List is in Beta Release

Sortable Unit Test

Basic Sortable List

Lists

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Sed commodo scelerisque nisl. Integer in ante vehicula,
  • vehicula tortor a, auctor quam.
  • Curabitur lectus magna, congue non ipsum sed, convallis lobortis justo.
  • Mauris vitae lacus a massa rutrum ullamcorper.
  • Nulla posuere eget quam eget rutrum.
  • Etiam non orci sit amet quam tempor porta.
  • Donec eu libero nisi. Vivamus vitae justo imperdiet,
  • euismod erat a, elementum nunc.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Sed commodo scelerisque nisl. Integer in ante vehicula,
  3. vehicula tortor a, auctor quam.
  4. Curabitur lectus magna, congue non ipsum sed, convallis lobortis justo.
  5. Mauris vitae lacus a massa rutrum ullamcorper.
  6. Nulla posuere eget quam eget rutrum.
  7. Etiam non orci sit amet quam tempor porta.
  8. Donec eu libero nisi. Vivamus vitae justo imperdiet,
  9. euismod erat a, elementum nunc.

Division & Tables

#1
#2
#3
#4
#5
#6
#7
#8
#9
Sorting Rows
Header #1 Header #2 Header #3
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3
Row 3, Col 1 Row 3, Col 2 Row 3, Col 3
Sorting Table Cells (independent table rows)
Header #1 Header #2 Header #3
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3
Row 3, Col 1 Row 3, Col 2 Row 3, Col 3

Sortable Elements with Indents & Depth

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Sed commodo scelerisque nisl. Integer in ante vehicula,
    • vehicula tortor a, auctor quam.
    • Curabitur lectus magna, congue non ipsum sed, convallis lobortis justo.
  • Mauris vitae lacus a massa rutrum ullamcorper.
  • Nulla posuere eget quam eget rutrum.
  • Etiam non orci sit amet quam tempor porta.
  • Donec eu libero nisi. Vivamus vitae justo imperdiet,
  • euismod erat a, elementum nunc.
#1
#2
#3
#4
#5
#6
#7
#8
#9
Sorting Rows
Header #1 Header #2 Header #3
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3
Row 3, Col 1 Row 3, Col 2 Row 3, Col 3
Row 4, Col 1 Row 4, Col 2 Row 4, Col 3
Row 5, Col 1 Row 5, Col 2 Row 5, Col 3

Multiple Drop Targets

Dropping targets to different lists.
  • UL1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • UL1: Sed commodo scelerisque nisl. Integer in ante vehicula,
  • UL1: vehicula tortor a, auctor quam.
  • UL1: Curabitur lectus magna, congue non ipsum sed, convallis lobortis justo.
  • UL1: Mauris vitae lacus a massa rutrum ullamcorper.
  • UL1: Nulla posuere eget quam eget rutrum.
  1. OL1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. OL1: Sed commodo scelerisque nisl. Integer in ante vehicula,
  3. OL1: vehicula tortor a, auctor quam.
  4. OL1: Curabitur lectus magna, congue non ipsum sed, convallis lobortis justo.
  5. OL1: Mauris vitae lacus a massa rutrum ullamcorper.
  6. OL1: Nulla posuere eget quam eget rutrum.
  • UL2: Etiam non orci sit amet quam tempor porta.
  • UL2: Donec eu libero nisi. Vivamus vitae justo imperdiet,
  • UL2: euismod erat a, elementum nunc.
  • UL2: Etiam non orci sit amet quam tempor porta.
  • UL2: Donec eu libero nisi. Vivamus vitae justo imperdiet,
  • UL2: euismod erat a, elementum nunc.

DIV1: #1
DIV1: #2
DIV1: #3
DIV1: #4
DIV1: #5
DIV1: #6
DIV1: #7
DIV1: #8
DIV1: #9
DIV2: #1
DIV2: #2
DIV2: #3
DIV2: #4
DIV2: #5
DIV2: #6
DIV2: #7
DIV2: #8
DIV2: #9

Sorting Rows
Header #1 Header #2 Header #3
Table 1: Row 1, Col 1 Table 1: Row 1, Col 2 Table 1: Row 1, Col 3
Table 1: Row 2, Col 1 Table 1: Row 2, Col 2 Table 1: Row 2, Col 3
Table 1: Row 3, Col 1 Table 1: Row 3, Col 2 Table 1: Row 3, Col 3
Sorting Rows
Header #1 Header #2 Header #3
Table 2: Row 1, Col 1 Table 2: Row 1, Col 2 Table 2: Row 1, Col 3
Table 2: Row 2, Col 1 Table 2: Row 2, Col 2 Table 2: Row 2, Col 3
Table 2: Row 3, Col 1 Table 2: Row 3, Col 2 Table 2: Row 3, Col 3
Sorting Rows
Header #1 Header #2 Header #3
Table 3: Row 1, Col 1 Table 3: Row 1, Col 2 Table 3: Row 1, Col 3
Table 3: Row 2, Col 1 Table 3: Row 2, Col 2 Table 3: Row 2, Col 3
Table 3: Row 3, Col 1 Table 3: Row 3, Col 2 Table 3: Row 3, Col 3

Using Drag Handle

Drag Me 1
This is the content section
Drag Me 2
This is the content section
Drag Me 3
This is the content section
Drag Me 4
This is the content section
Drag Me 5
This is the content section
Drag Me 6
This is the content section

Mixed Type of Elements

This example shows how to sort different types of elements and disabling some elements from being sorted (but keep them as targets).
Sortable Div
Sortable Div that been disabled
Not Sortable Div
Sortable Span Sortable Span that been disabled Not Sortable Span

Sortable Paragraph

Sortable Paragraph that been disabled

Not Sortable Paragraph