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>

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.16.0

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