1. Home
  2. UI Advanced
  3. Sortable & Netsable List

Sortable & Netsable List

Sortable Items

Default

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Connected lists with drop animation

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

Sort handle and limited drag/drop

I'm draggable and droppable
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
I'm only draggable
  • Item 1
  • Item 2
  • Item 3
I'm only droppable
  • Item 1
  • Item 2
  • Item 3

Connected lists with limited drop targets

Serialize result
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
Serialization and delay
Serialize result
  • Item 1
  • Item 2
  • Item 3
  • Item 4
    • Item 4.1
    • Item 4.2
    • Item 4.3
    • Item 4.4
    • Item 4.5
    • Item 4.6
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
Sort tables (doesn't work well in Konqueror and IE)
Sortable Rows
A ColumnB Column
A Item 0B Item 0
A Item 1B Item 1
A Item 2B Item 2
A Item 3B Item 3
A Item 4B Item 4
A Item 5B Item 5
A Item 6B Item 6
A Item 7B Item 7
A Item 8B Item 8
A Item 9B Item 9
Sortable column heads
A ColumnB Column
A Item 0B Item 0
A Item 1B Item 1
A Item 2B Item 2
A Item 3B Item 3
A Item 4B Item 4
A Item 5B Item 5
A Item 6B Item 6
A Item 7B Item 7
A Item 8B Item 8
A Item 9B Item 9


















Netsable List
Default
  1. Item 1
  2. Item 2
  3. Item 3
    1. Item 3-1
    2. Item 3-2
      1. Item 3-2-1
      2. Item 3-2-2
      3. Item 3-2-3
      4. Item 3-2-4
      5. Item 3-2-5
    3. Item 3-3
    4. Item 3-4
    5. Item 3-5
    6. Item 3-6
    7. Item 3-7
  4. Item 4
  5. Item 5
  6. Item 6
  1. Item 7
  2. Item 8
  3. Item 9
  4. Item 10
    1. Item 10-1
    2. Item 10-2
    3. Item 10-3
    4. Item 10-4
    5. Item 10-5
  5. Item 11
  6. Item 12
  7. Item 13
  8. Item 14
Serialised Output (per list)
Draggable Handles
  1. Drag
    Item 15
  2. Drag
    Item 16
  3. Drag
    Item 17
  4. Drag
    Item 18
  5. Drag
    Item 19
  6. Drag
    Item 20