Javascript 调整可滚动容器中元素的大小

我正在尝试调整

.shape

框的大小，该框位于

.wrapper

容器中。用户应该能够从长方体的四个角调整长方体的大小

为了理解，我写了一段简短的自我解释代码。请看一下。（默认情况下，我将包装器容器滚动到一位）

PS：右下角的大小调整器工作正常

解释我的尝试：

我已经使用

e.pageX

和

e.pageY

编写了调整大小功能，考虑到滚动到页面（body元素）本身，但现在我考虑滚动到元素（

.wrapper

），其中

e.pageX

和

e.pageY

不起作用，因为滚动到

.wrapper

而不是页面（body元素）

代码如下：

$('.shape').find('[data-resize]').on('mousedown', resizeStart);
$('.wrapper').scrollTop(1200);
var g = {
    fixed: 30
};
// Start of resizing functions
function resizeStart(e) {
    resizeStart.self = $(this);
    $(window).on('mousemove', resizeShape);
    $(window).on('mouseup', resizeEnd);
}

function resizeShape(e) {
    var $resizer = resizeStart.self;
    var $shape = $resizer.parents('.shape');
    var op = $resizer.data('resize');
    var offset = $shape.offset();
    var width = $shape.width();
    var height = $shape.height();
    var offsetLeft = e.clientX;
    var offsetTop = e.clientY;

    if (op === "br") {
        $shape.css({
            'width': offsetLeft - offset.left,
                'height': offsetTop - offset.top
        });
    } else if (op === "tr") {
        var xHeight = height + ($shape.offset().top - e.pageY);
        var xTop = height === g.fixed ? $shape.offset().top : e.pageY;
        var xWidth = e.pageX - $shape.offset().left;
        $shape.css({
            'height': xHeight,
                'top': xTop,
                'width': xWidth
        });
    } else if (op === "tl") {
        $shape.css({
            'height': height + (offset.top - offsetTop),
                'top': height === g.fixed ? offset.top : offsetTop,
                'width': width + (offset.left - offsetLeft),
                'left': width === g.fixed ? offset.left : offsetLeft,
        });
    } else if (op === "bl") {
        $shape.css({
            'width': width + (offset.left - offsetLeft),
                'left': width === g.fixed ? offset.left : offsetLeft,
                'height': offsetTop - offset.top
        });
    }
}

function resizeEnd(e) {
    $(window).off('mousemove');
    $(window).off('mouseup');
    resizeStart.self = null;
}

---

您的问题是关于

顶部

和

左侧

的计算。在这些情况下，您需要处理这样一个事实：您的元素是相对于可滚动框而不是整个页面定位的

} else if (op === "tr") {
    var xHeight = height + ($shape.offset().top - e.pageY);
    var xTop = height === g.fixed ? $shape.offset().top : e.pageY;
    var xWidth = e.pageX - $shape.offset().left;
    $shape.css({
        'height': xHeight,
            'top': xTop - $(".wrapper").offset().top + $('.wrapper').scrollTop(),
            'width': xWidth
    });
}

我在这里添加的位是：

- $(".wrapper").offset().top + $('.wrapper').scrollTop()

光标位置与整个页面相关，因此需要将其转换为滚动div

这里是一个小提琴与“tr”更新：

类似的方法应该适用于所有

顶部

和

左侧

计算。

试试

var handles = {}; // resize handles
$.each(["se", "ne", "nw", "sw"], function(i, handle) {
    var elem = $("div[class^=area]").eq(i)
    elem.addClass("ui-resizable-handle ui-resizable-" + handle).show(0);
     handles[handle] = elem[0];
  });
$(".shape").resizable({
    handles:handles,
    containment:"parent"
});

JSFIDLE

---

请参见

是否使用jquery ui可调整大小的选项？，例如，

$（.selector”）.resize（{containment:“parent”}）将执行此操作。现在，在我的时间里，我可以负担得起学习这一点。谢谢，我将检查这一点，我使用jQueryUI。仅通知您，上面两个可伸缩部件工作不正常。：）顶部手柄是向后的。这在小提琴中起作用，但在我的项目中不起作用。我会尽快完成，并让你知道。直到那时+1。感谢您的回答：）这在我的项目中是错误的，因为
.wrapper
类有一个愚蠢的
1px
边界。看看它是如何运作的。知道我能在这里做什么吗？我试着在任何地方添加
+1
或
-1
，但没有用。无论如何，我解决了它。我只是用了一些随机的，有效的：）@格林先生，看起来一个简单的
-1
很好用。我所看到的唯一的抖动是关于你的
固定的
（我真的不明白）。这是完整的解决方案。仍然在工作，但不是在我的项目。