javascript - フローティング要素のサイズを変更できるjquery ui.

Question

要素を右にフロートさせてから、jQuery UI のサイズ変更可能なウィジェットを使用して左端からサイズ変更可能にすると、奇妙なことが起こり始めます。

私はこれをまとめました：

http://jsfiddle.net/nicholasstephan/kCduV/2/

「サイドバー」のサイズを変更すると、私が話していることがすぐにわかります。

ここで何が間違っていますか？

float:right を維持したいので、左の列が自動的に処理されます。

Answer 1

実際のデモ: http://jsfiddle.net/kCduV/10/および別のソリューション: http://jsfiddle.net/kCduV/12/

jQuery コード:

$(function() {
    // $('.resizable').resizable({'handles': 'w'});
    $('.resizable').resizable({
        handles: 'e,w',
        resize: function (event,ui) {
            ui.position.left = ui.originalPosition.left;
            ui.size.width = (ui.size.width
                - ui.originalSize.width )*2
                + ui.originalSize.width;
        }
     });
});

または

$(function() {
    // $('.resizable').resizable({'handles': 'w'});
    $('.resizable').resizable({
        handles:'e,w',
        resize: function (event,ui) {
            ui.position.left = ui.originalPosition.left;
            ui.size.width += (ui.size.width - ui.originalSize.width);
        }
    });
});

説明: jQuery Resizable: リサイズ幅を 2 ​​倍にする