Question

我正在使用jQuery UI的“可调整大小”小部件向元素添加调整大小功能。

使用“网格”选项，可以根据给定的网格（例如100/80）调整元素的大小。我希望网格单元之间保持间隔（例如5），所以我将网格实际设置为105/85。

我在“画布”元素中绘制了网格，以便于查看：

$box.resizable({
    handles: "all",
    grid: [105, 85]
});

从右侧/底部调整大小效果很好，但是从顶部/左侧调整大小时，它将最小框尺寸强制为105x85。

我知道在网格内，它会尝试为网格单元设置最小尺寸，但是由于右侧/底部会按我需要的方式工作，因此我希望顶部/左侧也具有相同的行为。

我正在尝试编辑jQuery UI代码以进行此更改，这样我就不必自己编写完整的可调整大小的新功能。

我搜索了可调整大小的小部件的源代码，但是找不到在顶部/左侧调整大小上强制最小尺寸的代码。我希望有更多使用jQuery UI代码的经验的人可以为我指明正确的方向。

可调整大小的小部件的源代码可以在这里预览：

https://github.com/jquery/jquery-ui/blob/master/ui/widgets/resizable.js

或者可以从https://jqueryui.com>“自定义下载”中下载，然后仅选择“可调整大小”。

Answer 1

在搜索jQuery UI可调整大小的小部件的源代码之后，我设法找到了使左和顶部调整大小不同的代码。

修复很简单，只需要禁用两行代码即可：

$.ui.plugin.add( "resizable", "grid", {

    resize: function() {
        ...
        } else {
            if ( newHeight - gridY <= 0 || newWidth - gridX <= 0 ) {
                outerDimensions = that._getPaddingPlusBorderDimensions( this );
            }

            if ( newHeight - gridY > 0 ) {
                that.size.height = newHeight;
                that.position.top = op.top - oy;
            } else {
                // newHeight = gridY - outerDimensions.height;
                that.size.height = newHeight;
                that.position.top = op.top + os.height - newHeight;
            }
            if ( newWidth - gridX > 0 ) {
                that.size.width = newWidth;
                that.position.left = op.left - ox;
            } else {
                // newWidth = gridX - outerDimensions.width;
                that.size.width = newWidth;
                that.position.left = op.left + os.width - newWidth;
            }
        }
    }

}

jQuery UI可调整大小的网格，带有空格

1 个答案: