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>