Sortable official website

Sortable

Use when you want to be able inside some badge-pills into each item list, and they can also be sortable by dragging items.

  • 6 Cras justo odio
  • 2 Dapibus ac facilisis in
  • Morbi leo risus
  • 10 Porta ac consectetur ac
  • Vestibulum at eros

Sortable In Handle

Use when you want to be able to sort these order in the items list below.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Morbi leo risus

Sortable With Task List

Each items has a checkbox when you want to choice it. You can also drag it to sort their order.

Sortable With Editable List

Each items has some icon to edit the list. You can also drag it to sort their order.

  • Dapibus ac facilisis in
  • Vestibulum at eros
  • Vestibulum at eros
  • Porta ac consectetur ac
  • Cras sit amet nibh libero

Nestable official website

Basic Nestables

Users need to access information or functionality but they only need in under certain circumstances. Create items that can be opened or closed independently of each other.

  1. ITEM 1 Active
  2. ITEM 2 Approved
  3. ITEM 3 Pending
    1. ITEM 4
    2. ITEM 5
  4. ITEM 6
    1. ITEM 7
      1. ITEM 8

Drag With Handler

Nestables and also draggable using touch devices, you can simply create on by with an Ordered list, further reading please reffer documentation.

  1. ITEM 1
  2. ITEM 2
  3. ITEM 3
    1. ITEM 4
    2. ITEM 5
  4. ITEM 6
    1. ITEM 7
      1. ITEM 8

Connected Sortable List

Stack several items on top of each other and give some items a title. The items should be clckable and draggable between the expanded and collapsed states.

First List
  1. ITEM 1
  2. ITEM 2
  3. ITEM 3
    1. ITEM 4
    2. ITEM 5
Second List
  1. ITEM 6
  2. ITEM 7
  3. ITEM 8

With Media Content

  1. ITEM 1
    ...
    Herman Beck
    CEO
  2. ITEM 2
    ...
    Mary Adams
    CIO
    1. ITEM 3
      ...
      Caleb Richards
      CTO
  3. ITEM 4
    ...
    June Lane
    CVO