SORT - Horizontal - BIZAMAJIG USAGE

by bizamajig

HTML

<div id="sortable">
    <div>Tab 1</div>
    <div>Tab 2</div>
    <div>Tab 3</div>
    <div>Tab 4</div>
    <div>Tab 5</div>
</div>

CSS

#sortable {
    height: 30px;
    padding: 20px 20px 0 20px;
    background: #eee;
    border-bottom: 1px solid #aaa;
    font-family: arial, verdana;
    font-size: 12px;
}
#sortable div {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    margin: 0 2px;
    background: #fff;
    border: 1px solid #aaa;
    border-bottom: 0;
    float: left;
    cursor: move;
}

JavaScript

$('#sortable').sortable({
/*
*/
	axis: 'x',
    sort: function (event, ui) {
        var that = $(this),
            w = ui.helper.outerWidth();
        that.children().each(function () {
            if ($(this).hasClass('ui-sortable-helper') || $(this).hasClass('ui-sortable-placeholder')) 
                return true;
            // If overlap is more than half of the dragged item
            var dist = Math.abs(ui.position.left - $(this).position().left),
                before = ui.position.left > $(this).position().left;
            if ((w - dist) > (w / 2) && (dist < w)) {
                if (before)
                    $('.ui-sortable-placeholder', that).insertBefore($(this));
                else
                    $('.ui-sortable-placeholder', that).insertAfter($(this));
                return false;
            }
        });
    }
});