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

Question

我正在使用 jQuery UI 的 resizable 函数制作一个 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>

我看过 on and tried reinitializing resizable after the div is updated with the new file content but it didn't work。如何使 resizable 在 div 上工作，即使它的内容更改为显示上次上传文件的预览？

Answer 1

您是否尝试过"destroying"在设置文本之前调整大小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 中内容的顶部才能 see/use 可调整大小 "handles".

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

$("#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

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

Resizable stops working on div after its contents are updated

javascript

jquery

twitter-bootstrap

jquery-ui

jquery-ui-resizable