How to change panel height by dragging in any plac

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>