# HTML5 Sortable

HTML5 Sortable is a jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.

# DEPRECATION NOTICE

This project is not mantained anymore. I recommend using RubaXa's Sortable or voidberg's fork instead.

# Why another sortable plugin?

Because it's better.

Well, If you want to read the whole story read it here.

# Features

- Less than 1KB (minified and gzipped).
- Built using native HTML5 drag and drop API.
- Supports both list and grid style layouts.
- Similar API and behaviour to jquery-ui sortable plugin.
- Works in IE 5.5+, Firefox 3.5+, Chrome 3+, Safari 3+, and Opera 12+.

# How to use it?

Download it from here. Then use it like this:

    <ul class="sortable">
        <li>Item 1
        <li>Item 2
        <li>Item 3
        <li>Item 4
    </ul>
    <script src="jquery.sortable.js"></script>
    <script>
        $('.sortable').sortable();
    </script>

Use `.sortable-dragging` and `.sortable-placeholder` selectors to change the styles of a dragging item and its placeholder respectively.

Use `sortupdate` event if you want to do something when the order changes (e.g. storing the new order):

    $('.sortable').sortable().bind('sortupdate', function() {
        //Triggered when the user stopped sorting and the DOM position has changed.
    });

Use `items` option to specifiy which items inside the element should be sortable.

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

Use `handle` option to create sortable lists with handles:

    $('.sortable').sortable({
        handle: '.handle'
    });

Use `connectWith` option to create connected lists:

    $('#sortable1, #sortable2').sortable({
        connectWith: '.connected'
    });

To remove the sortable functionality completely:

    $('.sortable').sortable('destroy');

To disable the sortable temporarily:

    $('.sortable').sortable('disable');

To enable a disabled sortable:

    $('.sortable').sortable('enable');

The API is compatible with jquery-ui. So you can use jquery-ui as a polyfill in older browsers:

    yepnope({
        test: Modernizr.draganddrop,
        yep: 'jquery.sortable.js',
        nope: 'jquery-ui.min.js',
        complete: function() {
            $('.sortable').sortable().bind('sortupdate', function() {
                //Store the new order.
            }
        }
    });

# Demos

# Sortable List

- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6

# Sortable Grid

- Item 2
- Item 3
- Item 4
- Item 5
- Item 1
- 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

# License

HTML5 Sortable is released under the MIT license.