Question

我正在使用jQuery UI＆＃39; resizable函数创建一个div（引导面板），显示上传的文件的内容可调整大小。可调整大小最初在div上工作但在我用上传文件的内容更新后它停止工作并且可调整大小的光标不会出现。可以在下面的代码段和this jsfiddle中观察到此行为。

＆＃13;

$("#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]);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

scroll

#filePreview发生$("#filePreview").on('scroll', function() { adjustHandlePosition(); }); function adjustHandlePosition() { $('.ui-resizable-s').css('top', ($("#filePreview").scrollTop() + $('.preview-panel').height() + 27) + "px"); }事件时，也会调用adjustHandlePosition()方法：

resize

<强> Updated Fiddle

在其内容更新后，Resizable停止处理div

1 个答案: