jQuery UI可调整大小：重影问题 [英] jQuery UI Resizable: Ghosting issue

问题描述

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

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

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

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>

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

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

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

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

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

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

还有其他人看过这个吗？

Has anyone else seen this?

推荐答案

只要你的resizable中有一个自定义的帮助，就会发生这种情况（虽然我不完全确定原因。 ..）鬼只是一种特定的帮手。如果您查看可调整大小的小部件代码，会在 _renderProxy 函数中看到这一位：

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

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

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

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

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.

以下是关于@ılǝ的更新内容： http：// jsfiddle.net/py308nr7/

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

这篇关于jQuery UI可调整大小：重影问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！