Rate this docs

Sortable

Bootstrap sortable plugin

Bootstrap sortable plugin is an extension that allows you to move, reorder, sort and organize elements on your website by using drag and drop functionality.

To start working with sortable plugin see "Getting Started" tab on this page.


Basic Example

Change 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

Sorting 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

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 in an empty list. In this example, this has been changed.

From the first list, it is possible to drag to an empty list, while from the second list you cannot drag elements 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 possibility of sorting or dragging 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
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="fa 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="fa 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="fa 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="fa 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="fa 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 title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.



        <!-- 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.jpg" 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.jpg" 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.jpg" 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. Similar behavior is used in 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.

Someone famous in Source Title
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.

Someone famous in Source Title
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.

Someone famous in Source Title
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 - $9

Tutorial