Question

我正在尝试调整.shape容器中.wrapper框的大小。用户应该能够从盒子的四个角调整盒子的大小。

为了理解目的，我写了一个简短的自我解释代码。请看一下.. Fiddle。（我保持包装容器默认滚动到某个位置）。

PS：右下角缩放器工作正常。

我尝试过的解释：

考虑到使用e.pageX和e.pageY滚动到页面（ body element ），我已经编写了调整大小功能，但现在我正在考虑滚动到元素（.wrapper），其中e.pageX和e.pageY不起作用，因为滚动到.wrapper而不是页面（ body element ）。

以下是代码：

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

Answer 1

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

} 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。

这是一个小提琴＆＃34; tr＆＃34;更新：

http://jsfiddle.net/xzkby36n/20/

类似的方法应适用于所有top和left计算。

Answer 2

尝试

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"
});

jsfiddle http://jsfiddle.net/xzkby36n/23/

请参阅Resizable Widget

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

2 个答案: