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/