Question

jQuery UI＆＃34;可调整大小＆＃34;在元素的右侧和底部添加一个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上设置resizable并将图像设置为也可以调整大小以获得所需的效果。手柄将悬停在图像上方，图像将与侧面齐平。

变化：

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

jQuery UI-Resizable添加不需要的保证金

1 个答案: