Question

我想对两个区域进行垂直可拖动的划分，如下所示。

我只想修改online example可拖动的div是我想要的。最后，我得到this。有人可以给我一些修改它的提示吗？

JSFiddle链接：https://jsfiddle.net/casperhongkong/omekvtka/14/

HTML

<div class="container">
  <div class="area1">
Area 1
  </div>
  <div class="drag">

  </div>
  <div class="area2">
Area 2
  </div>
</div>

CSS

.container {
  position: fixed;
  top: 51px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #272822;
  border: 1px solid #222;
 // margin: 0 auto;
  //display: inline-block;
}

.area1 {
  position: absolute;
  height: 100%;
  width: 30%;
  background-color: #ddd;
  display: inline-block;
}

.drag {
  position: fixed;

  width: 5px;
  height: 100%;
  background-color: #444;
  display: inline-block;
}

.area2 {
  position: absolute;
  right: 0;
  height: 100%;
  width: 30%;
  background-color: #ddd;
  display: inline-block;
}

的JavaScript

$(document).ready(function() {

  $('.drag').on('mousedown', function(e) {
    var $area1 = $('.area1'),
        $area2 = $('.area2'),
        startWidth_a1 = $area1.width(),
        startWidth_a2 = $area2.width(),
        pX = e.pageX;

    $(document).on('mouseup', function(e) {
      $(document).off('mouseup').off('mousemove');
    });

    $(document).on('mousemove', function(me) {
      var mx = (me.pageX - pX);
      $area1.css({
        width: startWidth_a1 - mx;
      });
      $area2.css({
        //left: mx / 2,
        width: startWidth_a2 - mx,
        //top: my
      });
    });

  });
});

Answer 1

对于javascript，我建议检查一个库，因为这比仅仅几行更复杂。 @fauxserious给了Split.js一个很棒的例子。

这可以在纯HTML / CSS中实现，但略有限制，如here所述。

HTML：

<div class="split-view">
    <div class="resize-x panel" style="width: 216px;">
      Panel A
    </div>
    <div class="panel">
      Panel B
    </div>
</div>

CSS：

/* Panels: */
.panel{ 
    padding: 1em; 
    border-width: 6px; 
    border-style: solid; 
    height: 4em; 
}

/* Resizing */
.resize-x { 
    resize: horizontal;
    overflow: auto;
}

/* Split View */
.split-view {
    margin: 1em 0; 
    width: 100%;
    clear: both;
    display: table;
}

.split-view .panel {
    display: table-cell;
}

Answer 2

基于@afischer的表单元解决方案，这是一种替代方案。
我不得不将手风琴放在左侧面板中。

手风琴的粘页眉需要溢出才能可见，
调整大小时，溢出必须是可见的：
https://caniuse.com/#feat=css-sticky。

同时，我不需要在右侧面板中放置任何东西。

因此，一个克服的方法是在右侧面板上调整大小，然后旋转180度以将可拖动的边移到中间，并以此方式将可拖动的角移到顶部（无需滚动即可看到）。 >
加上一些突出显示已添加到可拖动的角落。

/* Panels: */
.panel{ 
  padding: 1em; 
  border-width: 6px; 
  border-style: solid; 
  height: 4em; 
}

/* Resizing */
.resize-x { 
  resize: horizontal;
  overflow: auto;
  transform: rotate(180deg);
  border-right: solid gray 1px;
}

/* Split View */
.split-view {
  margin: 1em 0; 
  width: 100%;
  clear: both;
  display: table;
}

.split-view .panel {
  display: table-cell;
}

.resize-x::-webkit-resizer {
    border-width: 8px;
    border-style: solid;
    border-color: transparent orangered orangered transparent;
  }

<div class="split-view">
    <div
      class="panel"
      style="width: 216px;">
        Panel A
    </div>
    <div class="panel resize-x">
      Panel B
    </div>
</div>

不幸的是，上面有两个令人失望的事情：

Firefox无法处理表格单元格和调整大小的组合
只有抓斗的一角响应，甚至可以轻松滚动出

这是另一种解决方案，它也考虑了以上两个问题

不调整CSS属性的大小
并带有全高响应抓斗

它是Flexbox和input：range滑块的组合。

诀窍在于，指针事件CSS属性可以不同

在滑块的背景上
及其抓取器上。

滑块会覆盖整个视图。滑块的背景也对事件透明（指针事件：无），而拖动栏本身捕获事件（指针事件：自动）。

它需要少量的Javascript，并且因为我已经在Nuxt.js中实现了生产版本，所以我在这里使用的是Vue.js，而不是原始的JS。

new Vue({
        el: '#vue',

        data: {
          windowWidth: null,
          splitWidth: null,
        },

        mounted() {
          this.windowWidth = window.innerWidth;
          // For arbitrary initial position:
          this.splitWidth = this.windowWidth * 2/3;
        },

        computed: {
          flexRatio() {
            return this.splitWidth / this.windowWidth;
          }
        }

      })

body {
        margin:0;
      }

      main {
        display: flex;
        width: 100%;
        height: 100vh;
      }

      article {
        display: flex;
      }

      section {
        width: 100%;
        height: 100%;
        text-align: justify;
        padding: 20px;
      }

      .section-left {
        background-color: darkseagreen;
      }

      .section-right {
        background-color: orangered;
      }

      #split-grabber {
        pointer-events: none;
        position: fixed;
        top: 0; right: 0; bottom: 0; left: 0;
        -webkit-appearance: none;
      /* Safari allows dragging behind scroll bar.
        We fix it by shrinking its width on the right side via both
        its range value      :max="windowWidth - 12"
        and its width (CSS)   width: calc(100% - 12px)
        ...synchronously  */
        width: calc(100% - 12px);
        height: 100vh;
        background: transparent;
        outline: none;
        margin: 0;
      }

      #split-grabber::-webkit-slider-thumb {
        z-index: 1;
        pointer-events: auto;
        -webkit-appearance: none;
        appearance: none;
        width: 5px;
        height: 100vh;
        background: lightgray;
        box-shadow: 1px 2px 2px 0px gray;
        cursor: col-resize;
      }

      #split-grabber::-moz-range-thumb {
        z-index: 1;
        pointer-events: auto;
        -webkit-appearance: none;
        appearance: none;
        width: 5px;
        height: 100vh;
        background: lightgray;
        box-shadow: 1px 2px 2px 0px gray;
        cursor: col-resize;
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<main id="vue">
      <!-- Safari allows dragging behind scroll bar
      We fix it by shrinking its width on the right side via both
      its range value      :max="windowWidth - 12"
      and its width (CSS)   width: calc(100% - 12px)
      ...synchronously  -->
      <input
        id="split-grabber"
        type="range" 
        v-model="splitWidth"
        :max="windowWidth - 12"
      >
      <article
      class="article"
      :style="{'flex': flexRatio}"
      >
        <section
        class="section section-left">
          splitWidth:{{ splitWidth }}px<br>
          “There was a rich man who always dressed in the finest clothes and lived in luxury every day.
          And a very poor man named Lazarus, whose body was covered with sores, was laid at the rich man’s gate.
          He wanted to eat only the small pieces of food that fell from the rich man’s table. And the dogs would come and lick his sores.
          Later, Lazarus died, and the angels carried him to the arms of Abraham. The rich man died, too, and was buried.
          In the place of the dead, he was in much pain. The rich man saw Abraham far away with Lazarus at his side.
          He called, ‘Father Abraham, have mercy on me! Send Lazarus to dip his finger in water and cool my tongue, because I am suffering in this fire!’
        </section>  
      </article>
      <article
        class="article"
        :style="{'flex': 1-flexRatio}"  
      >
        <section class="section section-right">
          But Abraham said, ‘Child, remember when you were alive you had the good things in life, but bad things happened to Lazarus. Now he is comforted here, and you are suffering.
          Besides, there is a big pit between you and us, so no one can cross over to you, and no one can leave there and come here.’
          The rich man said, ‘Father, then please send Lazarus to my father’s house.
          I have five brothers, and Lazarus could warn them so that they will not come to this place of pain.’
          But Abraham said, ‘They have the law of Moses and the writings of the prophets; let them learn from them.’
          The rich man said, ‘No, father Abraham! If someone goes to them from the dead, they would believe and change their hearts and lives.’
          But Abraham said to him, ‘If they will not listen to Moses and the prophets, they will not listen to someone who comes back from the dead.’”        
        </section>
      </article>
    </main>

两个区域的垂直可划分

2 个答案:

HTML：

CSS：