jQuery UI-Resizable Adding an Unwanted Margin

Question

jQuery UI "resizable" adds a 10 pixel handle to the right and bottom of an element. See example here: http://jsfiddle.net/Thaikhan/fGJ59/10/show/

If you click on Pikachu, then try to drag him into the bottom right corner, he doesn't fit flush because of the handle margin.

I want the images to be able to fit flush against the border. I've tried to disable the handle but have been unable to retain resizability while removing the border.

If this isn't possible, perhaps there's a way to add 10px to the right and bottom margin of the container and have the elements go through the border?

Thanks for your help!

Here is the relevant jQuery:

$('.inventory').on('click', 'img', function () {
$(this).resizable({
    aspectRatio: 1,
    autoHide: true,
    // containment: "parent",
    minHeight: 50,
    minWidth: 50,
    maxHeight: 300,
    maxWidth: 400
});

$(this).parent().appendTo(".frame").draggable({
    containment: "parent",
    cursor: "move"
});

refreshIndexList();
zindex();
});

Answer 1

Because you're working with the images directly resizable is wrapping them in a div and adding space for the handle. If you wrap the images in a div yourself, set resizable on the div and set the image to also resize you can get the desired effect. The handle will hover over the image and the image will be flush to the side.

The changes:

.frame img {
    position: relative;
    height : 50px;
    width: 50px;
}

You need to get rid of the top and left positioning, they don't seem to be doing anything and they mess things up when you wrap the image in a div.

$('.inventory').on('click', 'img', function () {
    $(this).wrap('<div style="height:50px;width:50px;"></div>');
    $(this).parent().resizable({
        aspectRatio: 1,
        alsoResize:this,
        autoHide: true,
        containment: "parent",
        minHeight: 50,
        minWidth: 50
    });

    $(this).parent().appendTo(".frame").draggable({
        containment: "parent",
        cursor: "move"
    });

    refreshIndexList();
    zindex();
});

Wrap the image in a div when it's added to the frame.

$('.frame').on('dblclick', '.ui-draggable', function () {
    $(this).find('img').appendTo(".inventory").attr('style', '');
    $(this).draggable("destroy");
    $(this).resizable("destroy");
    $(this).remove();
    refreshIndexList();
    zindex();
});

And then break the image out of the div when you put it back.

http://jsfiddle.net/fGJ59/13/