Question

我在jQuery UI Resizable事件中遇到了一个非常奇怪的问题，当＆＃34; ghost＆＃34;财产已经确定。

默认情况下，当我将大小调整方向设置为南方并且未启用ghost时，调整大小按预期运行，例如：

<div id="resizable" class="ui-widget-content" style="width: 300px;"> 
    <h3 class="ui-widget-header">Pull me at the bottom to resize me!!</h3>
</div>

当我向南调整大小时，宽度保持在300px。

然而，当＆＃34;鬼＆＃34;启用后，调整大小会在每次拖动/释放/拖动/释放操作时将宽度减小2px。

我查看了jQuery UI代码，但找不到任何关于为什么会发生这种情况的引用。

有没有人见过这个？

Answer 1

每当你的可调整大小中有一个自定义helper时就会发生这种情况，（虽然我不完全确定为什么......）ghost只是一种特定的助手。如果您查看the resizable widget's code，您会在_renderProxy函数中看到此位：

        this.helper.addClass(this._helper).css({
            width: this.element.outerWidth() - 1,
            height: this.element.outerHeight() - 1,
            position: "absolute",
            left: this.elementOffset.left + "px",
            top: this.elementOffset.top + "px",
            zIndex: ++o.zIndex //TODO: Don't modify option
        });

我不知道这些outerWidth - 1更改的目的是什么，但您可以通过扩展小部件来规避它：

$.widget("ui.resizable", $.ui.resizable, {
    _renderProxy: function() {
        this._super();
        this.helper.css({
            width: this.element.outerWidth(),
            height: this.element.outerHeight()
        });
    }
});

免责声明：谨慎使用！我只是展示如何解决这个问题，我不知道是什么原因导致原作者包含-1，但我认为他有充分的理由。

以下是关于@ılǝ的更新信息：http://jsfiddle.net/py308nr7/

jQuery UI可调整大小：重影问题

1 个答案: