调整大小停止后无法再次调整垂直标尺的大小

Question

我在垂直标尺上使用 JQuery 可调整大小的小部件，如下面的 link 所示。有一次，我开始使用东手柄调整大小并停止它。现在，我再次尝试调整标尺大小，但发现调整大小手柄未显示。我检查了 html div 但 ui-resizable div 被删除了。任何形式的帮助都是有用的。

我的 JS 代码：

createRuler();

$('.ruler').resizable({
  handles: "e",
  resize: function(event, ui) {
    $('.ruler').empty();
    createRuler();
  },
  stop: function(event, ui) {},
  start: function(event, ui) {}
});

Check here for complete code

Answer 1

这一行打破它：

 $('.ruler').empty();

我认为发生的事情是，您每次单击时都在转储数据（或引用 - 不确定 empty() 方法在您的应用程序中究竟做了什么）。当您第一次实例化它时这很好 - 但下次您单击它时 - 您又是 运行 相同的功能 - 这次没有调整大小的数据。

尝试设置一些仅在第一次单击标尺手柄时触发 $('.ruler').empty(); 的逻辑。

Answer 2

我的Html代码：

<div class="container">
 <div class='ruler'></div>
</div>

我更改了 JS 代码中的逻辑。我没有调整 inner-div(ruler) 的大小，而是在 outer-div(container) 上应用了调整大小，效果很好。

更新的 JS 代码：

createRuler();

$('.container').resizable({
  handles: "e",
  alsoResize: ".ruler",
  resize: function(event, ui) {
    $('.ruler').empty();
    createRuler();
  },
  stop: function(event, ui) {},
  start: function(event, ui) {}
});