javascript - jQuery UI-Resizable 添加不需要的边距

Question

jQuery UI“可调整大小”在元素的右侧和底部添加了一个 10 像素的 handle 。请参阅此处的示例:http://jsfiddle.net/Thaikhan/fGJ59/10/show/

如果您点击皮卡丘，然后尝试将他拖到右下角，由于 handle 边距，他不适合齐平。

我希望图像能够与边框齐平。我已尝试禁用 handle ，但在移除边框时无法保留可调整大小。

如果这不可能，也许有一种方法可以在容器的右侧和底部边距添加 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 上设置 resizable 并将图像设置为也可以调整大小，您可以获得所需的效果。 handle 将悬停在图像上，图像将齐平到一侧。

变化:

.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/