jquery ui可调整浮动元素。

Question

When you float an element to the right, then use jQuery UI's resizable widget to make it resizable from the left edge, weird things start happening.

I've put this together:

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

If you resize the "sidebar", you'll see immediately what I'm talking about.

What am I doing wrong here?

I'd prefer to keep the float:right so the left column takes care of itself.

Answer 1

Working demo: http://jsfiddle.net/kCduV/10/ and another solution: http://jsfiddle.net/kCduV/12/

jQuery code:

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

​OR

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

Explanation: jQuery Resizable: doubling the resize width