Javascript Resizeable在更新div的内容后停止对其工作

我正在使用jQueryUI的

resizeable

函数来制作一个div（引导面板），它显示上传的文件内容的大小。Resizeable最初在div上工作，但在我使用上载文件的内容更新它之后，它停止工作，并且不显示可调整大小的光标。可以在下面的代码段和中观察到这种行为

$（“#文件预览”）。可调整大小({
手柄：“n，s”，
最小身高：100
});
函数readFile（文件）{
var reader=new FileReader（）；
reader.onload=readSuccess；
函数readSuccess（evt）{
$（'#filePreview'）.text（evt.target.result）；
};
reader.readAsText（文件）；
}
$（文档）.on（'change'，'#inputFile'，function（）{
readFile（this.files[0]）；
});
。预览面板{
空白：行前；
溢出y：滚动；
最小高度：100px；
}

文件输入
文件预览
在设置文本之前，您是否尝试过“销毁”可调整大小的
div
，然后在设置文本之后重新初始化它

function readFile(file) {
  var reader = new FileReader();
  reader.onload = readSuccess;

  function readSuccess(evt) {
    $('#filePreview').resizable('destroy');
    $('#filePreview').text(evt.target.result);
    $("#filePreview").resizable({
      handles: "n, s",
      minHeight: 100
    });
  };
  reader.readAsText(file);
}

我不知道这是否是插件的一个怪癖，但是你必须滚动到
div
中内容的顶部才能看到/使用可调整大小的“句柄”

编辑：为了解决“手柄”在滚动时失去位置的问题，我添加了一个帮助函数，使用
文件预览的
滚动顶部
值+预览面板的
高度
+一个附加偏移量（
27px
）。每当在
#filePreview
上触发
滚动
事件时，我都会相应地调整手柄的位置

$("#filePreview").on('scroll', function() {
  adjustHandlePosition();
});

function adjustHandlePosition() {
  $('.ui-resizable-s').css('top', ($("#filePreview").scrollTop() + $('.preview-panel').height() + 27) + "px");
}

文件预览
发生
调整大小
事件时，也会调用
adjustHandlePosition（）
方法：

$("#filePreview").resizable({
  handles: "n, s",
  minHeight: 100,
  resize: function(event, ui) {
    adjustHandlePosition();
  }
});

只是太累了。它大部分时间都在工作，但有时即使使用destroy也无法调整大小。如果您滚动到div顶部，然后尝试调整大小，会怎么样？当你滚动时，手柄的位置不会改变。奇怪的是，有时即使没有滚动到屏幕，手柄也会工作，有时则不会。知道怎么解决吗？不知道。我有时间再看一看。如果我有任何进展，我会回复你。我已经添加了一些代码，有条件地添加了偏移量（基于
scrollWidth
和
clientWidth
）。它可能需要在偏移值方面进行一些调整，但总体上是有效的。请看最新的小提琴。