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

Thank you for creating with Phoenix|
2023 ©Themewagon

v1.14.0

Demo widget
Request a callbackSearch in chatShow historyReport to AdminClose Support

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
RTL

Change text direction

Support Chat

Toggle support chat

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize