Jquery 可调整大小不起作用答案

【问题标题】：Jquery resizable does not workJquery 可调整大小不起作用
【发布时间】：2011-01-19 00:33:03
【问题描述】：

我正在尝试使用 jquery-ui 可调整大小。

我在这里创建可调整大小的：

jQuery("#id404").resizable();

这是我创建可调整大小后的 div。

<div style="right: 7px; top: 120px; left:0%; bottom:340px; position:absolute; overflow:visible; z-index:2; cursor:pointer;">
   <div 
      id="id404" 
      name="resizable_div" 
      class="ui-resizable" 
      style="position:relative; width:100%; height:100%; overflow:hidden;">
   <div class="ui-resizable-handle ui-resizable-e"></div>
   <div class="ui-resizable-handle ui-resizable-s"></div>
   <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; "></div>
</div>
</div>

现在，这不起作用。

虽然当我尝试调整 div 框的大小时 div 变得可调整大小（手柄出现，图标发生变化等），但无论我在做什么，它都保持相同的大小。确实会发生调整大小的过程，因为在调试时，确实触发了 onStop 和 onStart 回调。

谁能告诉我我做错了什么？

我认为这与绝对 div 有关。

谢谢，

塔尔

【问题讨论】：

你是如何实现 jQuery 的？你在实现 UI 组件吗？ docs.jquery.com/UI/Resizable
不，我使用的是 jquery 源代码。

标签： javascript jquery resize resizable jquery-ui-resizable

【解决方案1】：

我认为您在这里遇到了样式问题。您有一个具有固定高和宽的容器 DIV。您正在将可调整大小的 DIV 放入其中。所以我认为容器 DIV 正在阻止调整大小的过程。

首先尝试摆脱那个 DIV 以检查它是否不是问题。

【讨论】：

好吧，我确实尝试从其他随机 div 创建可调整大小，它确实有效。我正在寻找一种方法来制作一个可调整大小的溢出它的父级。我曾经有一个看起来差不多的工作版本（结构方面）。我对结构进行了一些更改，但它停止了工作。但我所做的更改在结构树中要高得多。我相信这与宽度和高度的 CSS 样式有关。如果您能仔细查看代码并找出问题所在，我将不胜感激。

【解决方案2】：

目标 ID 采用父级的宽度和高度，但隐藏了溢出，因此无法调整其大小超出父级的尺寸。

【讨论】：

我不确定我是否理解。目标 div 应该正在扩展（调整大小），并且它的父级是溢出：可见。所以应该没问题，还是我错了？

【解决方案3】：

好吧，找到了问题所在，但我不知道为什么会这样。

好吧，我已经为 body:onresize 事件附加了一个从头开始绘制所有内容的函数。这是因为我有一个完整的网页网页，并且我希望重新渲染身体的每一次调整大小。

但显然每次 jquery 调整 div 大小时都会触发此事件，因此似乎什么也没发生。

现在，当我开始 jquery 调整大小时，我设置了一个全局标志“resize”，并命令重新渲染函数在此标志启动时返回。

但我不知道为什么在调整内部 div 大小时会触发 body 事件。

【讨论】：

这是正常的事件传播。您只需要停止可调整大小的传播，或者找到一种不同的方式来重绘所有内容（也许您不需要那样做？）
@tal，使用 windows.resize() 代替 body.onResize 可能更容易，也可能更好。不过，在resize句柄上，需要放 element.resizable().on('resize', function (event) { event.stopPropagation(); //防止这个事件触发 $(window).resize listener.

【解决方案4】：

尝试使父 div 可调整大小并使用以下语法：

$(selector, context).resizable({option1: value1, option2: value2..... });

【讨论】：