Transfer & List
We are using SortableJS for Transfer list. SortableJS is a JavaScript library for reorderable Transfer lists on modern browsers and touch devices.
Read the official SortableJS Documentation for a full list of instructions and other options.
Usage
In order to use SortableJS on your page, It is required to include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/sortablejs/sortable.js" />Examples
Cards
You can make any element draggable with sortableJS. All you have to do is Sortable.create(El);
Please Note: For RTL version, if you're using display: flex; style as a wrapper for your draggables, you'll
have to add flex-direction: row-reverse; style and you may optionally need to add justify-content: flex-end; style.
Monthly Sales
2362
Monthly Visits
687,123
Products
985
Users
105,652
<div class="row" id="sortable-cards">
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="card drag-item cursor-move mb-lg-0 mb-6">
<div class="card-body text-center">
<h2>
<i class="mdi mdi-cart-outline text-success mdi-24px"></i>
</h2>
<h4>Monthly Sales</h4>
<h5>2362</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="card drag-item cursor-move mb-lg-0 mb-6">
<div class="card-body text-center">
<h2>
<i class="mdi mdi-web text-info mdi-24px"></i>
</h2>
<h4>Monthly Visits</h4>
<h5>687,123</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="card drag-item cursor-move mb-lg-0 mb-6">
<div class="card-body text-center">
<h2>
<i class="mdi mdi-gift-outline text-danger mdi-24px"></i>
</h2>
<h4>Products</h4>
<h5>985</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="card drag-item cursor-move mb-lg-0 mb-6">
<div class="card-body text-center">
<h2>
<i class="mdi mdi-account-outline text-primary mdi-24px"></i>
</h2>
<h4>Users</h4>
<h5>105,652</h5>
</div>
</div>
</div>
</div>const cardEl = document.getElementById('sortable-cards');
Sortable.create(cardEl);Images
You can also use images as items for Transfer list.
<div class="dnd-images">
<div class="d-flex flex-wrap mb-4 gap-2" id="image-list-1">
<img class="rounded-circle drag-item cursor-move" src="..." alt="avatar-1" height="40" width="40" />
<img class="rounded-circle drag-item cursor-move" src="..." alt="avatar-2" height="40" width="40" />
<img class="rounded-circle drag-item cursor-move" src="..." alt="avatar-3" height="40" width="40" />
<img class="rounded-circle drag-item cursor-move" src="..." alt="avatar-4" height="40" width="40" />
<img class="rounded-circle drag-item cursor-move" src="..." alt="avatar-5" height="40" width="40" />
<img class="rounded-circle drag-item cursor-move" src="..." alt="avatar-6" height="40" width="40" />
</div>
<div class="d-flex flex-wrap gap-2" id="image-list-2">
<img class="rounded-circle drag-item cursor-move" src="..." alt="avatar-7" height="40" width="40" />
<img class="rounded-circle drag-item cursor-move" src="..." alt="avatar-8" height="40" width="40" />
<img class="rounded-circle drag-item cursor-move" src="..." alt="avatar-9" height="40" width="40" />
<img class="rounded-circle drag-item cursor-move" src="..." alt="avatar-10" height="40" width="40" />
<img class="rounded-circle drag-item cursor-move" src="..." alt="avatar-11" height="40" width="40" />
<img class="rounded-circle drag-item cursor-move" src="..." alt="avatar-12" height="40" width="40" />
</div>
</div>const imageList1 = document.getElementById('image-list-1');
const imageList2 = document.getElementById('image-list-2');
Sortable.create(imageList1, {
animation: 150,
group: 'imgList'
});
Sortable.create(imageList2, {
animation: 150,
group: 'imgList'
});Multiple Lists
Use group parameter to create multiple Transfer list list.
Pending Tasks
-
Buy products.
-
Reply to emails.
-
Write blog post.
-
Update packages.
-
New blog layout.
Completed Tasks
-
New icons set for an iOS app.
-
Fix validation bugs and commit.
-
Help Web developers with HTML integration.
-
Buy antivirus.
-
Answer support tickets.
<div class="row">
<div class="col-md-6 col-12 mb-md-0 mb-6">
<h5>Pending Tasks</h5>
<ul class="list-group list-group-flush" id="pending-tasks">
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Buy products.</span>
<img class="rounded-circle" src="..." alt="avatar-1" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Reply to emails.</span>
<img class="rounded-circle" src="..." alt="avatar-2" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Write blog post.</span>
<img class="rounded-circle" src="..." alt="avatar-3" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Update packages.</span>
<img class="rounded-circle" src="..." alt="avatar-4" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>New blog layout.</span>
<img class="rounded-circle" src="..." alt="avatar-5" height="32" width="32" />
</li>
</ul>
</div>
<div class="col-md-6 col-12 mb-md-0 mb-6">
<h5>Completed Tasks</h5>
<ul class="list-group list-group-flush" id="completed-tasks">
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>New icons set for an iOS app.</span>
<img class="rounded-circle" src="..." alt="avatar-1" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span> Fix validation bugs and commit.</span>
<img class="rounded-circle" src="..." alt="avatar-2" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span> Help Web developers with HTML integration.</span>
<img class="rounded-circle" src="..." alt="avatar-3" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Buy antivirus.</span>
<img class="rounded-circle" src="..." alt="avatar-4" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Answer support tickets.</span>
<img class="rounded-circle" src="..." alt="avatar-5" height="32" width="32" />
</li>
</ul>
</div>
</div>const pendingTasks = document.getElementById('pending-tasks');
const completedTasks = document.getElementById('completed-tasks');
Sortable.create(pendingTasks, {
animation: 150,
group: 'taskList'
});
Sortable.create(completedTasks, {
animation: 150,
group: 'taskList'
});Cloning
Use pull:"clone" parameter to make a cloning list.
Pending Tasks
-
Buy products.
-
Reply to emails.
-
Write blog post.
-
Update packages.
-
New blog layout.
Completed Tasks
-
New icons set for an iOS app.
-
Fix validation bugs and commit.
-
Help Web developers with HTML integration.
-
Buy antivirus.
-
Answer support tickets.
<div class="row">
<div class="col-md-6 col-12 mb-md-0 mb-6">
<h5>Pending Tasks</h5>
<ul class="list-group list-group-flush" id="clone-source-1">
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Buy products.</span>
<img class="rounded-circle" src="..." alt="avatar-1" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Reply to emails.</span>
<img class="rounded-circle" src="..." alt="avatar-2" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Write blog post.</span>
<img class="rounded-circle" src="..." alt="avatar-3" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Update packages.</span>
<img class="rounded-circle" src="..." alt="avatar-4" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>New blog layout.</span>
<img class="rounded-circle" src="..." alt="avatar-5" height="32" width="32" />
</li>
</ul>
</div>
<div class="col-md-6 col-12 mb-md-0 mb-6">
<h5>Completed Tasks</h5>
<ul class="list-group list-group-flush" id="clone-source-2">
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>New icons set for an iOS app.</span>
<img class="rounded-circle" src="..." alt="avatar-1" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span> Fix validation bugs and commit.</span>
<img class="rounded-circle" src="..." alt="avatar-2" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span> Help Web developers with HTML integration.</span>
<img class="rounded-circle" src="..." alt="avatar-3" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Buy antivirus.</span>
<img class="rounded-circle" src="..." alt="avatar-4" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Answer support tickets.</span>
<img class="rounded-circle" src="..." alt="avatar-5" height="32" width="32" />
</li>
</ul>
</div>
</div>const cloneSource1 = document.getElementById('clone-source-1');
const cloneSource2 = document.getElementById('clone-source-2');
Sortable.create(cloneSource1, {
animation: 150,
group: {
name: 'cloneList',
pull: 'clone',
revertClone: true
}
});
Sortable.create(cloneSource2, {
animation: 150,
group: {
name: 'cloneList',
pull: 'clone',
revertClone: true
}
});Handle
Use handle parameter to create a list which can only be moved
with handle.
Pending Tasks
-
Buy products
-
Reply to emails
-
Write blog post
-
Update packages
-
New blog layout
Completed Tasks
-
New icons set for an iOS app
-
Fix validation bugs and commit
-
Help Web developers with HTML integration
-
Buy antivirus
-
Answer support tickets
<div class="row">
<div class="col-md-6 col-12 mb-md-0 mb-6">
<p>Pending Tasks</p>
<ul class="list-group list-group-flush" id="handle-list-1">
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="d-flex justify-content-between align-items-center">
<i class="drag-handle cursor-move mdi mdi-menu align-text-bottom me-2"></i>
<span>Buy products</span>
</span>
<img class="rounded-circle" src="..." alt="avatar-1" height="32" width="32" />
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="d-flex justify-content-between align-items-center">
<i class="drag-handle cursor-move mdi mdi-menu align-text-bottom me-2"></i>
<span>Reply to emails</span>
</span>
<img class="rounded-circle" src="..." alt="avatar-2" height="32" width="32" />
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="d-flex justify-content-between align-items-center">
<i class="drag-handle cursor-move mdi mdi-menu align-text-bottom me-2"></i>
<span>Write blog post</span>
</span>
<img class="rounded-circle" src="..." alt="avatar-3" height="32" width="32" />
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="d-flex justify-content-between align-items-center">
<i class="drag-handle cursor-move mdi mdi-menu align-text-bottom me-2"></i>
<span>Update packages</span>
</span>
<img class="rounded-circle" src="..." alt="avatar-4" height="32" width="32" />
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="d-flex justify-content-between align-items-center">
<i class="drag-handle cursor-move mdi mdi-menu align-text-bottom me-2"></i>
<span>New blog layout</span>
</span>
<img class="rounded-circle" src="..." alt="avatar-5" height="32" width="32" />
</li>
</ul>
</div>
<div class="col-md-6 col-12 mb-md-0 mb-6">
<p>Completed Tasks</p>
<ul class="list-group list-group-flush" id="handle-list-2">
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="d-flex justify-content-between align-items-center">
<i class="drag-handle cursor-move mdi mdi-menu align-text-bottom me-2"></i>
<span>New icons set for an iOS app</span>
</span>
<img class="rounded-circle" src="..." alt="avatar-1" height="32" width="32" />
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="d-flex justify-content-between align-items-center">
<i class="drag-handle cursor-move mdi mdi-menu align-text-bottom me-2"></i>
<span>Fix validation bugs and commit</span>
</span>
<img class="rounded-circle" src="..." alt="avatar-2" height="32" width="32" />
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="d-flex justify-content-between align-items-center">
<i class="drag-handle cursor-move mdi mdi-menu align-text-bottom me-2"></i>
<span>Help Web developers with HTML integration</span>
</span>
<img class="rounded-circle" src="..." alt="avatar-3" height="32" width="32" />
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="d-flex justify-content-between align-items-center">
<i class="drag-handle cursor-move mdi mdi-menu align-text-bottom me-2"></i>
<span>Buy antivirus</span>
</span>
<img class="rounded-circle" src="..." alt="avatar-4" height="32" width="32" />
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="d-flex justify-content-between align-items-center">
<i class="drag-handle cursor-move mdi mdi-menu align-text-bottom me-2"></i>
<span>Answer support tickets</span>
</span>
<img class="rounded-circle" src="..." alt="avatar-5" height="32" width="32" />
</li>
</ul>
</div>
</div>const handleList1 = document.getElementById('handle-list-1');
const handleList2 = document.getElementById('handle-list-2');
Sortable.create(handleList1, {
animation: 150,
group: 'handleList',
handle: '.drag-handle'
});
Sortable.create(handleList2, {
animation: 150,
group: 'handleList',
handle: '.drag-handle'
});