How to change panel height by dragging in any place in footer

问题

Code below is used to change panel heights. This can done only by placing mouse cursor to 1px wide separator line or in panel body right downer corner.

How to allow height change by holding down mouse and dragging in any place in panel footer?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
  .panel-resizable {
    min-height: 0;
    overflow: hidden;
    margin: 0;
  }
  .panel {
    margin-bottom: 0;
  }
</style>
<script>
  $(function() {
    $(".panel-resizable").resizable({
      minWidth: "100%",
      maxWidth: "100%",
      minHeight: 0
    });
  });
</script>
</head>

<body>

  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:0.00cm'>
    </div>
    <div class='panel-footer panel-info'>PageHeader</div>
  </div>
  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:9.37cm'>
    </div>
    <div class='panel-footer panel-warning'>GroupHeader str(dokumnr)+str(koopia,2)</div>
  </div>
  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:0.66cm'>
    </div>
    <div class='panel-footer panel-warning'>GroupHeader str(dokumnr)+str(koopia,2)</div>
  </div>
  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:0.53cm'>
    </div>
    <div class='panel-footer panel-primary'>Detail</div>
  </div>
  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:0.00cm'>
    </div>
    <div class='panel-footer panel-warning'>GroupFooter</div>
  </div>
  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:7.68cm'>
    </div>
    <div class='panel-footer panel-warning'>GroupFooter</div>
  </div>
  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:0.00cm'>
    </div>
    <div class='panel-footer panel-default'>PageFooter</div>
  </div>

</body>

</html>

来源：https://stackoverflow.com/questions/34665395/how-to-change-panel-height-by-dragging-in-any-place-in-footer

标签

javascript

jquery

css

twitter-bootstrap

jquery-ui-resizable