问题描述
当设置了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 -1
s but I presume he had good reason.
以下是关于@ılǝ的更新内容:
Here's an update on @ılǝ's fiddle with this: http://jsfiddle.net/py308nr7/
这篇关于jQuery UI可调整大小:重影问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!