SORT - Horizontal - 125% Past Item to Drop - 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;
}
.highlight {
    background-color: red;
}

JavaScript

$('#sortable').sortable({
    axis: 'x',
    sort: function (event, ui) {
        var that = $(this);
        var w = ui.helper.outerWidth();
        var centreOfDraggedItem = ui.position.left + w/2;
        
        that.children().each(function () {
            if ($(this).hasClass('ui-sortable-helper') || $(this).hasClass('ui-sortable-placeholder')) 
                return true;
            var centreOfThisItem =  $(this).position().left + w/2;
            var dist = centreOfDraggedItem - centreOfThisItem;
            var before = centreOfDraggedItem > centreOfThisItem;
            if (Math.abs(dist) < w/2) {
                if (before && dist > w/4) { // moving right
                    $('.ui-sortable-placeholder').insertAfter($(this));
                    return false;
                }
                if (!before && dist < -(w/4)) { // moving left
                    $('.ui-sortable-placeholder').insertBefore($(this));
                    return false;
                }
            }
        });
    }
});
$('#sortable').data('ui-sortable')._intersectsWithPointer = function () {return false;};