Resizing an element in a scrollable container

Question

I am trying to resize .shape box which is in .wrapper container. The user should be able to resize the box from four corners of it.

For understanding purpose, I wrote a short self explaining code. Please have a look at it.. Fiddle. (I kept the wrapper container scrolled to a bit by default).

PS: The bottom-right resizer is working fine.

Explanation of what I tried:

I had already written the resize functionality considering the scroll to the page (body element) itself using e.pageX and e.pageY but now I am considering the scroll to a element (.wrapper), where e.pageX and e.pageY are not working because the scroll is to .wrapper instead of page(body element).

Here is the code:

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

Your issue is around the calculation of top and left. In these cases you need to deal with the fact that your elements are positioned in relation to the scrollable box and not the overall page.

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

The bit I added here is:

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

Your cursor position is in relation to the overall page, so you need to translate that into the scrolling div.

Here is a fiddle with the "tr" updated:

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

A similar approach should work for all top and left calculations.

Answer 2

Try

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/

See Resizable Widget