Question

我正在使用jquery UI调整元素大小。我有一个元素应该可以调整到宽度，例如1200px或1600px（用户喜欢）。但是当在此之前有元素时（我将所有元素水平排列），如果鼠标光标到达屏幕的末尾，则调整大小操作将停止。

您可以在此处进行测试：http://gopeter.de/clients/dustin/

最右边的框可以调整大小。

有没有人有任何想法我怎么能阻止这个？我应该检查光标位置并在到达终点时扩展元素吗？或者还有其他技术吗？

Answer 1

也许你可以调整身体大小并滚动以允许不断调整大小：

var body = $('body');

$('#resize').resizable({
    handles: "e,s,se",
    resize: function (event, ui) {
        var width = body.width(),
            diff = width - (width - (this.offsetLeft + this.offsetWidth));

        body.width(diff).scrollLeft(diff);
    }
});

或（少jQuery）

$('#resize').resizable({
    handles: "e,s,se",
    resize: function (event, ui) {
        var width = document.body.clientWidth,
            diff = width - (width - (this.offsetLeft + this.offsetWidth));
        document.body.style.width = diff + 'px';
        document.body.scrollLeft = diff;
    }
});

以下是相关的小提琴：http://jsfiddle.net/jeff_mccoy/UpmNq/2/

请注意，你可以通过仅调整每X个像素（！diff％3）的大小来加快速度，但调整大小也会有点不稳定。

Answer 2

最好将调整大小手柄放在左侧。

resizable：调整超出屏幕末尾的元素

2 个答案: