jQuery UI sortable tolerance option not working as expected

Question

Here is the part from jQuery UI documentation for the tolerance option:

This is the way the reordering behaves during drag. Possible valu

Answer 1

Expanding on dioslaska's answer slightly. Here's an example to do (what I'll call) 125% overlap http://jsfiddle.net/yj1wwtsd/4/.

This only flips an element when you have gone past it by 25%. In my case I combine droppable and sortable and it feels better when the dragged item can completely overlap another (to allow dropping) before flipping.

Of particular note is the jQueryUI hack on the last line. Without this it always defaults to intersect tolerance, even though the sort method is trying to do something different. This may break with future versions of jQueryUI (tested with 1.11.2).

$('#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;};