jquery ui resizable-如何强制在父级中调整大小？

Question

网页中有三列可调整大小。我需要

1. 强制列宽不超过父列的宽度
2. 它们一起必须填充父级的宽度
3. 只有内部边框必须是可移动的。

因此，如果一列宽度变大，另一列必须变小，反之亦然。

为此，我需要尝试jquery ui resiable 并设置containment: "parent"，但是这3 个项目都没有完成。这是代码

    <style>
        .resizable {
            height: 300px;
            border: 1px solid red;
            float: left;
            min-width: 20%;
        }
    </style>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header text-right">{{ __('Messages') }}</div>
                    <div class="card-body ">
                        <div id="usersColumn" class="resizable">
                        </div>
                        <div id="messagesColumn" class="resizable"></div>
                        <div id="messageColumn" class="resizable"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            $(".resizable").resizable({
                containment: "parent",
            });
        });
    </script>

我该怎么办？ 谢谢

Answer 1

你需要：

使用包含选项来指定父 DOM 元素或 jQuery 选择器

jquery UI - resizable

$(function() {
  $(".resizable").resizable({
    containment: ".card-body"
  });
});

.card-body {
  display: flex;
}

.resizable {
  height: 300px;
  border: 1px solid red;
  flex: 1 1 auto;
}

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

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header text-right">{{ __('Messages') }}</div>
        <div class="card-body ">
          <div id="usersColumn" class="resizable">
          </div>
          <div id="messagesColumn" class="resizable"></div>
          <div id="messageColumn" class="resizable"></div>
        </div>
      </div>
    </div>
  </div>
</div>