jQuery UI 可调整大小 : Ghosting issue

Question

当设置了“ghost”属性时，我在 jQuery UI Resizable 事件中发现了一个非常奇怪的问题。

默认情况下，当我将调整大小方向设置为南，并且没有启用重影时，调整大小会按预期运行，示例:

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

当我调整南边的大小时，宽度保持在 300 像素。

但是，当启用“ghost”时，调整大小会在每次拖动/释放/拖动/释放操作时将宽度减小 2px。

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

有没有人看到这个？

Answer 1

每当您在可调整大小中有自定义 helper 时，就会发生这种情况(虽然我不完全确定为什么...) ghost 只是一种特殊的 helper。如果你看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/