Resizable 在其内容更新后停止在 div 上工作

Question

我正在使用 jQuery UI 的 resizable 函数制作一个 div（引导面板），它显示上传的文件的内容可调整大小。可调整大小最初在 div 上工作，但在我用上传的文件内容更新它后，它停止工作并且不出现可调整大小的光标。这种行为可以在下面的 sn-p 和this jsfiddle 中观察到。

$("#filePreview").resizable({
  handles: "n, s",
  minHeight: 100
});

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

  function readSuccess(evt) {
    $('#filePreview').text(evt.target.result);
  };
  reader.readAsText(file);
}

$(document).on('change', '#inputFile', function() {
  readFile(this.files[0]);
});

.preview-panel {
  white-space: pre-line;
  overflow-y: scroll;
  min-height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="container">
  <form class="form-inline">
    <div class="form-group">
      <label for="inputFile">File Input</label>
      <input type="file" class="form-control" id="inputFile">
    </div>
  </form>
  <div class="panel panel-default">
    <div class="panel-heading">File Preview</div>
    <div class="panel-body preview-panel" id="filePreview"></div>
  </div>
</div>

我在resizable for dynamically added elements 上看到questions 并尝试在使用新文件内容更新div 后重新初始化可调整大小，但it didn't work。我如何让resizable 在 div 上工作，即使它的内容发生更改以显示上次上传文件的预览？

Answer 1

您是否尝试在设置文本之前“破坏”可调整大小的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 中内容的顶部才能查看/使用可调整大小的“句柄”。

编辑：为了解决“手柄”在滚动时失去位置的问题，我添加了一个辅助函数来使用 @ 的 scrollTop 值添加 top 值987654327@ + .preview-panel 的 height + 一个额外的偏移量（在这种情况下为27px）。每当在#filePreview 上触发scroll 事件时，我都会相应地调整手柄的位置。

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

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

当#filePreview 发生resize 事件时，也会调用adjustHandlePosition() 方法：

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

Updated Fiddle