Question

我在垂直标尺上使用JQuery Resizable小部件，如下面的链接所示。有一次，我开始使用东手柄调整大小并停止它。现在，我尝试再次调整标尺的大小，我发现调整大小的句柄没有显示出来。我检查了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代码中的逻辑。我没有调整内部div（标尺）的大小，而是在外部div（容器）上应用了大小调整，它完美地工作了。

更新了JS代码：

createRuler（）;

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

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

2 个答案: