javascript - jQuery resizable splitter异常行为

Question

我使用了 Jquery Resizable 组件，父 div 中有三个可调整大小的 div。我需要适当调整所有三个 div 的大小，但是右侧面板和拆分器存在问题。当您尝试调整大小时，它会以另一种方式移动。我一直在努力寻找解决方案，但一无所获。

JSFiddle

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>

<div class="page-container">
  <div class="panel-container">

    <div class="panel-left">
      left panel
    </div>

    <div class="splitter">
    </div>

    <div class="panel-center">
      center panel
    </div>

    <div class="splitter-right">
    </div>

    <div class="panel-right">
      right panel
    </div>


  </div>


</div>

查询

$(".panel-left").resizable({
   handleSelector: ".splitter",
   resizeHeight: false
 });

  $(".panel-right").resizable({
   handleSelector: ".splitter-right",
   resizeHeight: false
 });

Answer 1

这是工作演示。我对您的 CSS 和 JS 进行了更改。我使用 JS 创建了拆分器并添加了 onDragStart 函数来处理它

$(".panel-left,.panel-center")
     .css({
    /* required to allow resizer embedding */
    position: "relative"
  })
  /* check .resizer CSS */
  .prepend("<div class='resizer'></div>")
  .resizable({
    resizeHeight: false,
    // we use the column as handle and filter
    // by the contained .resizer element
    handleSelector: "",
    onDragStart: function(e, $el, opt) {
      // only drag resizer
      if (!$(e.target).hasClass("resizer"))
        return false;
      return true;
    }
 });

html,
body {
  height: 100%;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  padding: 0;
  margin: 0;
  overflow: auto;
}

.page-container {
  margin: 20px;
}

/* horizontal panel*/

.panel-container {
  display: flex;
  flex-direction: row;
  border: 1px solid silver;
  overflow: hidden;
  /* avoid browser level touch actions */
  xtouch-action: none;
}

.panel-left {
  flex: 0 0 auto;
  /* only manually resize */
  padding: 10px;
  width: 30%;
  min-height: 200px;
  white-space: nowrap;
  background: #838383;
  color: white;
}
.resizer {
    position: absolute;
    top: 0;
    right: 0px;
    bottom: 0;
    left: auto;
    width: 16px;
    cursor: col-resize;
    background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
}

.panel-center {
  flex: 1 1 auto;
  /* resizable */
  padding: 10px;
  width: 30%;
  min-height: 200px;
  background: #eee;
}

.panel-right {
  flex: 1 1 auto;
  /* resizable */
  padding: 10px;
  width: 30%;
  min-height: 200px;
  background: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>

<div class="page-container">
  <div class="panel-container">

    <div class="panel-left">
      left panel
    </div>

    <div class="panel-center">
      center panel
    </div>
    
    <div class="panel-right">
      right panel
    </div>


  </div>


</div>