HTML5 Sortable jQuery Plugin

HTML5 Sortable is a jQuery plugin allows create sortable lists and grids using native HTML5 drag and drop. You can create sortable list with types: Grid, List, Disabled Items, Event Handles and Connected Lists.

Features:

  • Fully responsive and works great on every device (Desktop, Tablet, Mobile)
  • Drag and drop
  • Supports both list and grid style layouts.
  • Events Handler
  • Vertical and horizontal sorting

Live Demo

Sortable List

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Sortable Grid

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Sortable List With Disabled Items

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Sortable List With Handles

  • :: Item 1
  • :: Item 2
  • :: Item 3
  • :: Item 4
  • :: Item 5
  • :: Item 6

Connected Sortable Lists

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

How to Use

Add the css below to your html page

<style>
    #demos section {
        overflow: hidden;
    }

    .sortable {
        width: 310px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .sortable.grid {
        overflow: hidden;
    }

    .sortable li {
        list-style: none;
        border: 1px solid #CCC;
        background: #F6F6F6;
        color: #1C94C4;
        margin: 5px;
        padding: 5px;
    }

    .sortable.grid li {
        line-height: 80px;
        float: left;
        width: 80px;
        height: 80px;
        text-align: center;
    }

    .handle {
        cursor: move;
    }

    .sortable.connected {
        width: 200px;
        min-height: 100px;
        float: left;
    }

    #sortable3 li.disabled {
        opacity: 0.5;
    }

    #sortable3 li.highlight {
        background: #FEE25F;
    }

    #sortable3 li.sortable-placeholder {
        border: 1px dashed #CCC;
        background: none;
    }
</style>

Create a container where you want to render list

<section>
    <h4>Sortable List</h4>
    <ul id="sortable1" class="sortable list">
        <li>Item 1
        <li>Item 2
        <li>Item 3
        <li>Item 4
        <li>Item 5
        <li>Item 6
    </ul>
</section>

<section>
    <h4>Sortable Grid</h4>
    <ul id="sortable2" class="sortable grid">
        <li>Item 1
        <li>Item 2
        <li>Item 3
        <li>Item 4
        <li>Item 5
        <li>Item 6
    </ul>
</section>

<section>
    <h4>Sortable List With Disabled Items</h4>
    <ul id="sortable3" class="sortable list">
        <li>Item 1
        <li>Item 2
        <li>Item 3
        <li class="disabled">Item 4
        <li class="disabled">Item 5
        <li class="disabled">Item 6
    </ul>
</section>

<section>
    <h4>Sortable List With Handles</h4>
    <ul id="sortable-with-handles" class="sortable list">
        <li><span class="handle">::</span> Item 1</li>
        <li><span class="handle">::</span> Item 2</li>
        <li><span class="handle">::</span> Item 3</li>
        <li><span class="handle">::</span> Item 4</li>
        <li><span class="handle">::</span> Item 5</li>
        <li><span class="handle">::</span> Item 6</li>
    </ul>
</section>

<section>
    <h4>Connected Sortable Lists</h4>
    <ul id="sortable4" class="connected sortable list">
        <li>Item 1
        <li>Item 2
        <li>Item 3
        <li>Item 4
        <li>Item 5
        <li>Item 6
    </ul>
    <ul id="sortable5" class="connected sortable list">
        <li class="highlight">Item 1
        <li class="highlight">Item 2
        <li class="highlight">Item 3
        <li class="highlight">Item 4
        <li class="highlight">Item 5
        <li class="highlight">Item 6
    </ul>
</section>

Load jQuery library together with the HTML5 Sortable library into your code

<script src="http://onlinefreetools.net/wp-content/uploads/demo/layout/html5-sortable/js/jquery.sortable.js"></script>

<script>
    $(function () {
        
        $('#sortable1, #sortable2').sortable();

        $('#sortable3').sortable({
            items: ':not(.disabled)'
        });

        $('#sortable-with-handles').sortable({
            handle: '.handle'
        });

        $('#sortable4, #sortable5').sortable({
            connectWith: '.connected'
        });

    });
</script>

Source Code

Download

For more Advanced Usages, please check the demo page or visit the official website.