Question

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

以下是代码：

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

设置＆＃39;位置＆＃39;可调整大小的jQuery对象的属性

1 个答案: