jQuery изменяемый размер центрированного div с сеткой, дающей неожиданные результаты

У меня есть div, который сосредоточен на странице с использованием css-margin: 0 auto; Это важно

jQuery resizeable подключается к div так, что его можно изменить горизонтально.

Опция "сетка" для resizeable также добавлена по мере запуска других функций во время изменения размера, и эти функции вызывались слишком много раз без активации опции сетки.

Я также добавил позицию jquery к изменяемому размеру div, чтобы сохранить его в центре во время изменения размера, иначе, когда вы перетащите левый край, он потеряет центральное положение.

Проблема в том, что мышь перемещается все дальше и дальше от левого края, чем шире вы перетаскиваете div влево или вправо. Левый/правый край div всегда должен быть привязан к положению мыши.

Также ui.size.width сообщает значение, намного превышающее фактическую ширину div.

Я пробовал множество исправлений, но ничего не работает.

Здесь код с ссылкой jsfiddle ниже:

HTML:

<div id="container">
    <div class="resize">
        Lorem
        <br/>ipsum
        <br/>dolor
        <br/>sit
        <br/>amet
        <br/>Consectetuer
        <br/>Lorem
        <br/>magna
        <br/>mi
        <br/>wisi
     </div>
</div>

<div id="width-output"></div>
<div id="ui-width-output"></div>

CSS:

#container {
    width:100%;
    background-color:#999999;
}
.resize {
    width:240px;
    margin:0 auto;
    background-color:#ccc;
    text-align:center;
}

#ui-width-output, #width-output  {
    text-align:center;
}

JQuery:

$(document).ready(function () {
    $(".resize").resizable({
        grid: [80, 80],

        handles: 'e, w',
        resize: function (event, ui) {

            ui.size.width += ui.size.width - ui.originalSize.width;

            var container =  $('#container');

            var position = $(this).position();
            var container_position = container.position();
            var top_position = position.top - container_position.top;

            var offset = 'center top+' + top_position;
            $(this).position({
                of: $(container),
                my: offset,
                at: "center top",
                collision: "fit none"
            });

            $('#width-output').html('actual width: ' +  $(this).width() );            
            $('#ui-width-output').html('ui.size.width: ' +  ui.size.width);

        }

    });
});

Я создал тестовый пример, так что все это имеет смысл!

http://jsfiddle.net/bennyticklez/S5tN8/51/

Заранее спасибо.