jQuery UI Resizable: Ghosting issue

问题

I picked up a very weird issue with the jQuery UI Resizable event, when the "ghost" property has been set.

By default, when I set the sizing direction to south, and not have ghost enabled, the resizing functions as expected, example:

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

When I resize this south, the width is retained at 300px.

However, when "ghost" is enabled, the resizing decreases the width by 2px on every drag / release / drag / release action.

I looked at the jQuery UI code, but cannot find any references as to why this is happening.

Has anyone else seen this?

回答1:

This happens whenever you have a custom helper in your resizable, (though I'm not entirely sure why...) ghost is just a specific kind of helper. If you look at the resizable widget's code you'll see this bit in the _renderProxy function:

        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
        });

I don't know what the purpose of those outerWidth - 1 changes is, but you can circumvent it by extending the widget:

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

Disclaimer: use with caution! I'm just showing how to get around the issue, I don't know what caused the original author to include those -1s but I presume he had good reason.

Here's an update on @ılǝ's fiddle with this: http://jsfiddle.net/py308nr7/

来源：https://stackoverflow.com/questions/30342073/jquery-ui-resizable-ghosting-issue