Sortable
Bootstrap sortable plugin
The Bootstrap sortable plugin is an extension that allows you to move, reorder, sort and organize elements on your website using drag and drop functionality.
To start working with a sortable plugin, see the "Getting Started" tab on this page.
Basic Example
This changes the order of elements in the DOM tree by dragging the element.
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
<ul id="sortable" class="list-group">
<li class="list-group-item active">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
<li class="list-group-item">Item 4</li>
<li class="list-group-item">Item 5</li>
<li class="list-group-item">Item 6</li>
<li class="list-group-item">Item 7</li>
<li class="list-group-item">Item 8</li>
</ul>
$("#sortable").sortable();
Merging lists
This sorts items between two lists
- Lion
- Dog
- Cat
- Tiger
- Fish
- Bird
- Falcon
- Mouse
<ul id="sortable1" class="list-group connectedSortable">
<li class="list-group-item active">Lion</li>
<li class="list-group-item">Dog</li>
<li class="list-group-item">Cat</li>
<li class="list-group-item">Tiger</li>
</ul>
<ul id="sortable2" class="list-group connectedSortable">
<li class="list-group-item active">Fish</li>
<li class="list-group-item">Bird</li>
<li class="list-group-item">Falcon</li>
<li class="list-group-item">Mouse</li>
</ul>
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable"
});
Display as grid
Displays items in a sortable grid - this can be used to determine the order in which photos or files are uploaded.
1
2
3
4
5
6
7
8
9
10
11
12
<div id="sortable3" class="col-md-5 d-flex flex-center flex-wrap">
<div class="text-center white-text blue m-2 square">1</div>
<div class="text-center white-text blue m-2 square">2</div>
<div class="text-center white-text blue m-2 square">3</div>
<div class="text-center white-text blue m-2 square">4</div>
<div class="text-center white-text blue m-2 square">5</div>
<div class="text-center white-text blue m-2 square">6</div>
<div class="text-center white-text blue m-2 square">7</div>
<div class="text-center white-text blue m-2 square">8</div>
<div class="text-center white-text blue m-2 square">9</div>
<div class="text-center white-text blue m-2 square">10</div>
<div class="text-center white-text blue m-2 square">11</div>
<div class="text-center white-text blue m-2 square">12</div>
</div>
$("#sortable3").sortable();
.square {
height: 90px;
width: 90px;
line-height: 90px;
font-size: 32px;
}
Drop placeholder
This provides illumination of the place where the element will be placed.
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
<ul id="sortable4" class="list-group list-unstyled">
<li class="list-group-item active">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
<li class="list-group-item">Item 4</li>
<li class="list-group-item">Item 5</li>
<li class="list-group-item">Item 6</li>
<li class="list-group-item">Item 7</li>
<li class="list-group-item">Item 8</li>
</ul>
$("#sortable4").sortable({
placeholder: 'drop-placeholder'
});
.drop-placeholder {
background-color: lightgray;
height: 3.5em;
padding-top: 12px;
padding-bottom: 12px;
line-height: 1.2em;
}
Handle empty lists
By default, it is not possible to place an item into an empty list. In this example, this has been changed.
From the first list, it is possible to drag items to an empty list, while from the second list you cannot drag items if the target list is empty.
The dropOnEmpty: false parameter is responsible for this behavior.
- Lion
- Dog
- Cat
- Tiger
- Fish
- Bird
- Falcon
- Mouse
<ul id="sortable5" class="list-group droptrue">
<li class="list-group-item active">Lion</li>
<li class="list-group-item">Dog</li>
<li class="list-group-item">Cat</li>
<li class="list-group-item">Tiger</li>
</ul>
<ul id="sortable6" class="list-group dropfalse">
<li class="list-group-item active">Fish</li>
<li class="list-group-item">Bird</li>
<li class="list-group-item">Falcon</li>
<li class="list-group-item">Mouse</li>
</ul>
<ul id="sortable7" class="list-group droptrue grey lighten-1 py-2">
</ul>
$("ul.droptrue").sortable({
connectWith: "ul"
});
$("ul.dropfalse").sortable({
connectWith: "ul",
dropOnEmpty: false
});
Include/exclude items
It is possible to exclude items from the ability to sort or drag items before/after them.
- I'm sortable
- I'm not sortable or a drop target
- I'm not sortable or a drop target
- I'm sortable
- I'm sortable
- I'm not sortable
- I'm not sortable
- I'm sortable
<ul id="sortable8" class="list-group">
<li class="list-group-item active ui-state-default">I'm sortable</li>
<li class="list-group-item ui-state-default ui-state-disabled disabled">I'm not sortable or a drop
target</li>
<li class="list-group-item ui-state-default ui-state-disabled disabled">I'm not sortable or a drop
target</li>
<li class="list-group-item ui-state-default">I'm sortable</li>
</ul>
<ul id="sortable9" class="list-group">
<li class="list-group-item active ui-state-default">I'm sortable</li>
<li class="list-group-item ui-state-default ui-state-disabled disabled">I'm not sortable</li>
<li class="list-group-item ui-state-default ui-state-disabled disabled">I'm not sortable</li>
<li class="list-group-item ui-state-default">I'm sortable</li>
</ul>
$("#sortable8").sortable({
items: "li:not(.ui-state-disabled)"
});
$("#sortable9").sortable({
cancel: ".ui-state-disabled"
});
Sortable collapsed cards
Cards with collapsed content and sorting between lists - similar behavior can be observed on Trello.
Feeds
Lorem ipsum dolor sit amet,
consectetuer
adipiscing elit
News
Lorem ipsum dolor sit amet,
consectetuer
adipiscing elit
Shopping
Lorem ipsum dolor sit amet,
consectetuer
adipiscing elit
Links
Lorem ipsum dolor sit amet,
consectetuer
adipiscing elit
Images
Lorem ipsum dolor sit amet,
consectetuer
adipiscing elit
<div class="col-md-4 mx-auto my-5 blue pb-4 white-text">
<div class="column">
<div class="portlet">
<div class="portlet-header blue darken-3 py-2 my-3 text-center white-text collapseButton" data-toggle="collapse"
href="#feeds">Feeds <i class="fas fa-caret-down ml-2"></i></div>
<div class="portlet-content collapse text-center" id="feeds">Lorem ipsum dolor sit amet,
consectetuer
adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header blue darken-3 py-2 my-3 text-center white-text collapseButton" data-toggle="collapse"
href="#news">News <i class="fas fa-caret-down ml-2"></i></div>
<div class="portlet-content collapse text-center" id="news">Lorem ipsum dolor sit amet,
consectetuer
adipiscing elit</div>
</div>
</div>
</div>
<div class="col-md-4 mx-auto my-5 blue pb-4 white-text">
<div class="column">
<div class="portlet">
<div class="portlet-header blue darken-3 py-2 my-3 text-center white-text collapseButton" data-toggle="collapse"
href="#shopping">Shopping <i class="fas fa-caret-down ml-2"></i></div>
<div class="portlet-content collapse text-center" id="shopping">Lorem ipsum dolor sit amet,
consectetuer
adipiscing elit</div>
</div>
</div>
</div>
<div class="col-md-4 mx-auto my-5 blue pb-4 white-text">
<div class="column">
<div class="portlet">
<div class="portlet-header blue darken-3 py-2 my-3 text-center white-text collapseButton" data-toggle="collapse"
href="#links">Links <i class="fas fa-caret-down ml-2"></i></div>
<div class="portlet-content collapse text-center" id="links">Lorem ipsum dolor sit amet,
consectetuer
adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header blue darken-3 py-2 my-3 text-center white-text collapseButton" data-toggle="collapse"
href="#images">Images <i class="fas fa-caret-down ml-2"></i></div>
<div class="portlet-content collapse text-center" id="images">Lorem ipsum dolor sit amet,
consectetuer
adipiscing elit</div>
</div>
</div>
</div>
$(".column").sortable({
connectWith: ".column",
handle: ".portlet-header",
cancel: ".portlet-toggle",
placeholder: "drop-placeholder"
});
$('.portlet-header').on('click', function (e) {
if ($(e.target).children().last().hasClass('fa-caret-down')) {
$(e.target).children().last().removeClass('fa-caret-down').addClass('fa-caret-up');
}
else if ($(e.target).children().last().hasClass('fa-caret-up')) {
$(e.target).children().last().removeClass('fa-caret-up').addClass('fa-caret-down');
}
});
Sortable deck of cards
Cards with collapsed content and sorting between lists - similar behavior can be observed on Trello.
<!-- Card deck -->
<div class="card-deck">
<div class="sortable-card col-md-4">
<!-- Card -->
<div class="card mb-4">
<!--Card image-->
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/images/16.webp" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the
bulk of
the card's content.</p>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-light-blue btn-md">Read more</button>
</div>
</div>
<!-- Card -->
</div>
<div class="sortable-card col-md-4">
<!-- Card -->
<div class="card mb-4">
<!--Card image-->
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/images/14.webp" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the
bulk of
the card's content.</p>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-light-blue btn-md">Read more</button>
</div>
</div>
<!-- Card -->
</div>
<div class="sortable-card col-md-4">
<!-- Card -->
<div class="card mb-4">
<!--Card image-->
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/images/15.webp" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the
bulk of
the card's content.</p>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-light-blue btn-md">Read more</button>
</div>
</div>
<!-- Card -->
</div>
</div>
<!-- Card deck -->
$(".card-deck").sortable({
connectWith: '.card-deck'
});
Sortable masonry panels
Sortable panels in masonry style. A similar behavior is used by Pinterest.
Panel title that wraps to a new line
This is a longer panel with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Panel title
This panel has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Panel title
This panel has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Panel title
This is a wider panel with supporting text below as a natural lead-in to additional content. This panel has even longer content than the first to show that equal height action.
Last updated 3 mins ago
<div class="card-columns">
<div class="sortable">
<!--Panel-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Panel title that wraps to a new line</h5>
<p class="card-text">This is a longer panel with supporting text below as a natural
lead-in
to
additional content. This content is a little bit longer.</p>
</div>
</div>
<!--/.Panel-->
</div>
<div class="sortable">
<!--Panel-->
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<!--/.Panel-->
</div>
<div class="sortable">
<!--Panel-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Panel title</h5>
<p class="card-text">This panel has supporting text below as a natural lead-in to
additional
content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<!--/.Panel-->
</div>
<div class="sortable">
<!--Panel-->
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<!--/.Panel-->
</div>
<div class="sortable">
<!--Panel-->
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Panel title</h5>
<p class="card-text">This panel has supporting text below as a natural lead-in to
additional
content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<!--/.Panel-->
</div>
<div class="sortable">
<!--Panel-->
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<!--/.Panel-->
</div>
<div class="sortable">
<!--Panel-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Panel title</h5>
<p class="card-text">This is a wider panel with supporting text below as a natural
lead-in
to
additional content. This panel has even longer content than the first to show that
equal
height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<!--/.Panel-->
</div>
</div>
$(".sortable").sortable({
connectWith: 'div'
});
Sortable - getting started : download & setup
Download
This plugin requires a purchase.
Buy sortable plugin