Sortable nestable

  1. Home
  2. Advanced UI
  3. Sortable nestable

Sortable

Sortable basic

Drag and drop an element to a new location within the sortable grid.

  • 9 Best smile
  • All rounder
  • 9 Lazy bee
  • 7 Helping hand
  • May the dollars keep rolling round you
  • Study your way to glory
  • 23 Fire on the mountain, run, run, run

Sortable in handle

By default, the entire sortable element can be used for drag and drop sorting.

  • Best smile
  • All rounder
  • Lazy bee
  • Helping hand
  • May the dollars keep rolling round you
  • Study your way to glory
  • Fire on the mountain, run, run, run

Sortable with task list

Sort Tasks by dragging one of them and placed to what part of the list with checkbox when you want to choice it.

Nestable

Basic nestables

The nestable allows you to sort items through drag and drop.

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

Drag with handler

By default, the entire nestable element can be used for drag and drop sorting.

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

Connected sortable list

To be able to sort items from one list to another, multiple lists item drag and drop each list.

First List
  1. Section 1
  2. Section 2
  3. Section 3
    1. Section 4
    2. Section 5
Second list
  1. Section 6
  2. Section 7
    1. Section 8
    2. Section 9
  3. Section 10

With media content

  1. Section 1

    Jet misra

    Web designer
    image
  2. Section 2

    Garry keo

    Wordpress developer
    imge
  3. Section 3

    Arafat jan

    Web developer
    image
    1. Section 4

      Ricky sen

      SEO
      image
    2. Section 5

      Luke parth

      Graphics designer
      image