具有三个div的可调整大小的JQuery不起作用

Question

我在我的一个项目中使用了Jquery resizable。我希望三个div并排有两个分隔符，并相应地调整每个div的大小。我可以毫无问题地调整前两个div的大小。然而，我不能去工作第三个。

还有一个问题是，当你移动拆分器时，它也会移动最后一个--拆分器和div。

JSFiddle

​

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

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: 300px;
  min-height: 200px;
  min-width: 150px;
  white-space: nowrap;
  background: #838383;
  color: white;
}

.splitter {
  flex: 0 0 auto;
  width: 18px;
  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
  min-height: 200px;
  cursor: col-resize;
}

.splitter-right {
  flex: 0 0 auto;
  width: 18px;
  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
  min-height: 200px;
  cursor: col-resize;
}

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

.panel-right {
  flex: 1 1 auto;
  /* resizable */
  padding: 10px;
  width: 100%;
  min-height: 200px;
  min-width: 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="splitter">
    </div>

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


  </div>


</div>

​

Answer 1

以下是工作代码：

​

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

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

.splitter {
  flex: 0 0 auto;
  width: 5%;
  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
  min-height: 200px;
  cursor: col-resize;
}

.splitter-right {
  flex: 0 0 auto;
  width: 5%;
  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
  min-height: 200px;
  cursor: col-resize;
}

.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="splitter">
    </div>

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


  </div>


</div>

​

你的错误：

您将left-panel宽度设置为静态，然后将其设置为min-width，然后覆盖width属性，然后使用display flex将页面使用的总宽度设置为center和right

100% + 100% + 300px + 18px + 18px (拆分器宽度)

Answer 2

水平三个面板的正确答案包括

1. 调整面板的大小-居中而不是面板右侧的
2. 设置它的伸缩为0

​

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

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: 150px;
  min-height: 200px;
  min-width: 150px;
  white-space: nowrap;
  background: #838383;
  color: #ffffff;
}

.splitter,
.splitter-right {
  flex: 0 0 auto;
  width: 18px;
  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
  min-height: 200px;
  cursor: col-resize;
}

.panel-center{
  flex: 1 0 auto;
  padding: 10px;
  width: 30%;
  min-height: 200px;
  min-width: 200px;
  background: #eee;
  color: #000;
}

.panel-right {
  flex: 0 0 auto;  /* only manually resize */
  padding: 10px;
  width: 30%;
  min-height: 200px;
  min-width: 200px;
  background: #838383;
  color: #ffffff;
}  
}

<html>
<head>
    <title>Simple Split Panels - jquery-resizable</title>
    <meta charset="utf-8"/>
</head>
<body style="">

<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>
</body>
</html>

​