javascript - 内容更新后，可调整大小将停止在 div 上工作

Question

我正在使用 jQuery UI 的 ressized 函数来制作一个 div( Bootstrap 面板)，用于显示可调整大小的上传文件的内容。可调整大小最初适用于 div，但在我使用上传的文件内容更新它后，它停止工作并且不会出现可调整大小的光标。可以在下面的代码片段和 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>

我见过questions上resizable for dynamically added elements并尝试在 div 使用新文件内容更新后重新初始化可调整大小，但 it didn't work 。即使在内容更改为显示上次上传文件的预览后，如何使 ressized 在 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 中内容的顶部为了查看/使用可调整大小的“ handle ”。

编辑:为了解决滚动时“ handle ”丢失位置的问题，我添加了一个辅助函数来添加 top使用 scrollTop 的值#filePreview 的值+ height .preview-panel的+ 一个额外的偏移量(在本例中为 27px)。每当scroll事件在 #filePreview 上触发，我正在相应地调整 handle 的位置。

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

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

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

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

<强> Updated Fiddle