Question

我对JQuery Resizable插件有这个奇怪的事情：

非常简化，归结为：

我需要调整div的高度，只在底部调整大小句柄（让我们称之为div div2）
调整大小后，div的父宽度因某种原因而改变（让我们称之为div div1）
div2的宽度根据其父div1

一切正常。现在问题是我想使用带有可调整大小的插件的帮助程序css类，只是为了让事情看起来更好。但是，如果我配置帮助程序，步骤3不再发生？先前调整大小的div似乎有一个永久的静态宽度???

在下面的jsfiddle中可以复制该问题： http://jsfiddle.net/g52p9/1/

重现的步骤：

抓住底部的手柄
单击按钮将父div（div1）的宽度设置为100
现在重复步骤1和2，帮助行取消注释并查看差异....

有人能解释我为什么会这样吗？

PS. Why does a link to jsfiddle.net must be accompanied by code?

Answer 1

好的，我想通了。所以这是我自己问题的答案：

我初始化可调整大小的元素如下：

 $(".resizable").resizable({
            grid: 50,   
            handles: ' s',
            helper: "ui-resizable-helper"
  });

当把柄选项设置为's'（南）时，我们只能垂直调整元素大小，所以只有高度会改变。出于某种原因，如果不设置辅助选项，则元素的width属性保持不变，但在设置辅助（或动画）选项时，width属性将设置为当前宽度。

Answer 2

<强>来源：

<强> https://forum.jquery.com/topic/how-do-i-get-the-resizable-stop-event-to-fire-after-the-resize-animation-is-finished

上面的消息来源......我不赞成这个解决方案，只是不希望这个资源永远不会丢失。

对我有用的解决方案，然后您可以修改resizeComplete中的元素以删除宽度。

  $('.resizable').resizable({
        stop: function(event, ui) {
            var resized = $(this);
            resized.queue(function() {
              resizeComplete(resized);
              $( this ).dequeue();
            });
        }
    }); 

    function resizeComplete(element) {
       alert('resized!');
    }

使用帮助程序使用Jquery UI Resizable调整div大小后没有自动宽度

2 个答案: