JSFiddle - React, Tailwind, and code Playground

by 亮 薛

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap 可拖动分栏布局</title>
</head>

<body>
  <div class="container">
    <div class="row resizable">
      <!-- 左栏 -->
      <div class="col-md-6 left-pane">
        <h2>左栏内容</h2>
        <p>这里可以放置左栏的具体内容，比如文本、图片、列表等。</p>
      </div>
      <div class="resizer"></div>
      <!-- 右栏 -->
      <div class="col-md-6 right-pane">
        <h2>右栏内容</h2>
        <p>右栏可以有不同的信息展示，与左栏形成对比或补充。</p>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

CSS

.resizable {
      overflow: hidden;
    }

   .resizer {
      cursor: ew-resize;
      width: 5px;
      background-color: #ddd;
      position: absolute;
    }

JavaScript

$(document).ready(function () {
      let isResizing = false;
      let startX;
      let startWidth;

      $('.resizer').mousedown(function (e) {
        isResizing = true;
        startX = e.pageX;
        startWidth = $('.left-pane').width();
        return false;
      });

      $(document).mousemove(function (e) {
        if (isResizing) {
          const diffX = e.pageX - startX;
          $('.left-pane').width(startWidth + diffX);
          $('.right-pane').width($('.row').width() - $('.left-pane').width() - 5);
        }
      });

      $(document).mouseup(function () {
        isResizing = false;
      });
    });