为可调整大小的 jQuery 对象设置 'position' 属性

Question

我需要限制页面上多个可调整大小对象的位置，当我使用 'stop' 事件检查位置并更改 ui.position.left 时，它不起作用。我有一个例子 jsfiddle 有一个对象。我试图将左端限制为 50px。它检测到 'stop' 处的正确位置，但没有根据我指定的位置移动它。这是什么原因？

代码如下：

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

提前致谢， 米拉

Answer 1

我不知道 jQuery resizable 带有设置西（或任何）边界的方法，但您可以使用 .css() 和一些数学来自己设置样式：

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

JSFiddle