## Sortable

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.

Sortable

#### Basic Example

Hare is the basic example of sortableJs. You can drag sortable items between the same group. Use `data-sortable` attribute to get default behavior. We have also designed our Kanban Board usign SortableJS libarary.

    <div class="row">
      <div class="col-6" data-sortable="data-sortable">
        <div class="sortable-item-wrapper mb-3">
          <p class="mb-0 sortable-item bg-body-highlight p-3 rounded-3">Item1</p>
        </div>
        <div class="sortable-item-wrapper mb-3">
          <p class="mb-0 sortable-item bg-body-highlight p-3 rounded-3">Item2</p>
        </div>
        <div class="sortable-item-wrapper mb-3">
          <p class="mb-0 sortable-item bg-body-highlight p-3 rounded-3">Item3</p>
        </div>
      </div>
      <div class="col-6" data-sortable="data-sortable">
        <div class="sortable-item-wrapper mb-3">
          <p class="mb-0 sortable-item bg-body-highlight p-3 rounded-3">Item4</p>
        </div>
        <div class="sortable-item-wrapper mb-3">
          <p class="mb-0 sortable-item bg-body-highlight p-3 rounded-3">Item5</p>
        </div>
      </div>
    </div>

Item1

Item2

Item3

Item4

Item5

#### User Options

You can pass sortable options through `data-sortable` attribute like `data-sortable="{"group":"example","animation":150}"`

    <div class="row">
      <div class="col-6" data-sortable='{"group":"example","animation":150}'>
        <div class="sortable-item-wrapper mb-3">
          <p class="mb-0 sortable-item bg-body-highlight p-3 rounded-3">Item1</p>
        </div>
        <div class="sortable-item-wrapper mb-3">
          <p class="mb-0 sortable-item bg-body-highlight p-3 rounded-3">Item2</p>
        </div>
        <div class="sortable-item-wrapper mb-3">
          <p class="mb-0 sortable-item bg-body-highlight p-3 rounded-3">Item3</p>
        </div>
      </div>
      <div class="col-6" data-sortable='{"group":"example","animation":150}'>
        <div class="sortable-item-wrapper mb-3">
          <p class="mb-0 sortable-item bg-body-highlight p-3 rounded-3">Item4</p>
        </div>
        <div class="sortable-item-wrapper mb-3">
          <p class="mb-0 sortable-item bg-body-highlight p-3 rounded-3">Item5</p>
        </div>
      </div>
    </div>

Item1

Item2

Item3

Item4

Item5

#### Javascript

    <pre><code class="language-html"> &lt;script src=&quot;vendors/sortablejs/Sortable.min.js&quot;&gt;&lt;/script&gt;</code></pre>

     <script src="vendors/sortablejs/Sortable.min.js"></script>

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize