jQuery UI可调整大小的添加不必要的边距

Question

jQuery UI“可调整大小”在元素的右侧和底部添加了10像素的句柄。 在此处查看示例： http : //jsfiddle.net/Thaikhan/fGJ59/10/show/

如果单击“皮卡丘”，然后尝试将其拖到右下角，则由于手柄余量，他不适合齐平。

我希望图像能够与边框齐平。 我试图禁用该句柄，但在删除边框时无法保持可缩放性。

如果无法做到这一点，也许有一种方法可以在容器的右侧和底部边缘添加10px并使元素穿过边界？

谢谢你的帮助！

这是相关的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

由于您正在使用直接调整大小的图像，因此将它们包装在div中并为手柄添加空间。 如果您自己将图像包装在div中，请在div上设置可调整大小，并将图像设置为也可以调整大小，以获得所需的效果。 手柄将悬停在图像上方，并且图像将齐平到侧面。

变化：

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

您需要摆脱顶部和左侧的位置，它们似乎没有做任何事情，而且当您将图像包装在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();
});

将图像添加到框架后，将其包装在div中。

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

然后将图像放回div中时，将其断开。

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