jQuery Sortable Plugin

Make a list or items in a container Sortable!

Code Demo

$('#container-vertical .item').sortable({
    flow: 'vertical', // vertical, horizontal, v-flow, h-flow
    container: $('#container-vertical'), // items' parent as default
    wrapWidth: 'auto',
    wrapHeight: 'auto',
    wrapPadding: [10, 10, 0, 0], // support [top, side, bottom], [vertical, horizontal], [all] format
    elWidth: 'auto',
    elHeight: 'auto',
    elMargin: [0, 0, 10, 10],
    timeout: 300, // the time delay when placeholder move. 100ms as default
    filter: function (index) {return index !== 3;} // use to exclude items handle mouse/touch event
});

flow: vertical

CSS:

#container-vertical {
    position: relative;
    padding: 10px 10px 0 0;
    width: 400px;
    ...
}

#container-vertical .item {
    position: absolute;
    height: 40px;
    line-height: 40px;
    margin: 0 0 10px 10px;
    padding: 0;
    ...
}

JavaScript:

var dataVertical = $('#container-vertical .item').sortable({
    flow: 'vertical',
    wrapPadding: [10, 10, 0, 0],
    elMargin: [0, 0, 10, 10],
    elWidth: 200
});
$('#btn-vertical').click(function (e) {
    $('#result-vertical').text('Order: ' + dataVertical.getOrder());
});

DEMO:

a
b
c
d
e

flow: horizontal

CSS:

#container-horizontal {
    height: 60px;
}
#container-horizontal .item {
    width: 40px;
}

JavaScript:

$('#container-horizontal .item').sortable({
    flow: 'horizontal',
    wrapPadding: [10, 10, 0, 0],
    elMargin: [0, 0, 10, 10],
    elHeight: 'auto',
    filter: function (index) {return index !== 2;},
    timeout: 1000
});

DEMO:

a
b
c
d
e

flow: v-flow

CSS:

#container-v-flow {
    height: 110px;
}
#container-v-flow .item {
    width: 40px;
    height: 40px;
}

JavaScript:

$('#container-v-flow .item').sortable({
    flow: 'v-flow',
    wrapPadding: [10, 10, 0, 0],
    elMargin: [0, 0, 10, 10]
});

DEMO:

a
b
c
d
e

flow: h-flow

CSS:

#container-h-flow {
    width: 200px;
}
#container-h-flow .item {
    width: 40px;
    height: 40px;
    line-height: 40px;
}

JavaScript:

$('#container-h-flow .item').sortable({
    flow: 'h-flow',
    wrapPadding: [10, 10, 0, 0],
    elMargin: [0, 0, 10, 10],
    elWidth: 80,
    elHeight: 80
});

DEMO:

a
b
c
d
e

Download Sortable