Setting 'position' property for a resizable jQuery object

Question

I need to limit the position of multiple resizable objets on the page and when I check the position using the 'stop' event and change ui.position.left it doesn't work. I have an example jsfiddle with one object. I am trying to limit the left end to 50px. It detects the correct position at 'stop' but does not move it according to what I specify. What is the reason?

Here is the code:

$('#resizable-dealie').resizable(
    {
        handles: 'e, w',
        stop: function(event,ui)
        {
            alert(ui.position.left);
            //don't let user drag outside the container
            if (ui.position.left<50)
            {
                ui.position.left=50;
                alert('(Trying to) move back to 50');
            }
        }
    });

Thanks in advance, Mila

Answer 1

I don't know that jQuery resizable comes with a method to set the west (or any) boundary, but you can use .css() and some math to set the styles yourself:

$('#resizable-dealie').resizable({
    handles: 'e, w',
    stop: function (event, ui) {
        if (ui.position.left < 50) {
            $(this).css({
                left: 50,
                width: 150
            });
        }
    }
});

JSFiddle