jquery 可调整大小的栏，它响应窗口大小

Question

我想达到什么目标？ 要水平调整大小，但我已经这样做了。 到我的可调整大小的栏来响应窗口大小，此时它根本不动，它一直停留在同一个地方（除非我调整这个 ofc 的大小；）） 我需要从左到右调整表单大小的选项

问题 当我将位置设置为绝对时，从左到右调整大小可以正常工作，但它没有响应。当我将它设置为响应时，它没有响应并且无法从左到右调整大小。它总是在右侧调整大小。

$(document).ready(function() {
  $('.container').append('<div id="resizable"></div>');
  for (var i = 0; i < 19; i++) {
    $('#hours-row').append('<span class="hour hour-"' + (i + 6) + '>' + (i + 6) + '</span>');
  }
});

$(function() {
  $("#resizable").resizable({
    grid: 15,
    animate: true,
    helper: "ui-resizable-helper",
    handles: 'e, w',
    minHeight: 30,
    maxHeight: 30
  });
});

var barGenerator = function(shopID, width, type, grid) {
  $(function() {
    $("#resizable").resizable({
      grid: grid,
      animate: true,
      helper: "ui-resizable-helper",
      handles: 'e, w',
      minHeight: width,
      maxHeight: width
    });
  });
}

#resizable {
  margin: auto;
  height: 15px;
  width: 120px;
  padding: 0.5em;
  background: #35ad1a;
  box-sizing: content-box;
  position: relative;
  margin-left: 10%;
}

.hours-bar {
  box-sizing: content-box;
  margin: auto;
  height: 15px;
  padding: 0.5em;
  position: fixed;
}

#hours-row {
  margin-left: 12%;
}

.hour {
  padding-right: 30px;
  font-size: large;
}

.shop-work-hours-bar {
  width: 120px;
  background: #20b229;
}

.ui-resizable-helper {
  border: 2px dotted red;
  z-index: 10000 !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css "/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="hours-row"></div>
<div id="resizable"></div>

技术： asp.net core 2.0, jquery, jquery-ui

Answer 1

您可以使用以下句柄：

$("#resizable").resizable({
   handles: 'e, w, sw'
});