如何通过id为drag的拖拽元素调整showfilteredhistory的div高度

核心问题修正 #

原代码存在以下几处问题，修改后即可实现拖动指定元素调整目标div高度的效果：

• 纵向拖拽调整高度使用Y轴坐标即可，原代码错误定义了X轴相关变量，且高度计算公式方向有误，得到的高度不符合拖拽方向预期
• 给#showfilteredhistory设置height属性后又立即清空该属性，导致高度配置完全不生效
• 没有设置最小高度限制，拖拽时容易出现高度为0的异常情况
• #container未设置相对定位，内部元素的高度计算无法拿到正确的偏移值

修正后的CSS代码 #

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#container {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 10px;
}
#showfilteredhistory {
  overflow-y: auto;
  margin-bottom: 15px;
}
#drag {
  cursor: n-resize;
  text-align: center;
  user-select: none;
}

修正后的JS代码 #

var isResizing = false;

$(function () {
  var container = $('#container'),
      filteredhistory = $('#showfilteredhistory'),
      handle = $('#drag');
  // 初始高度赋值
  filteredhistory.css('height', '70px');

  handle.on('mousedown', function (e) {
    isResizing = true;
    e.preventDefault();
  });

  $(document).on('mousemove', function (e) {
    if (!isResizing) return;
    // 计算新高度
    var newHeight = e.clientY - container.offset().top;
    // 限制最小高度为初始的70px
    if (newHeight < 70) newHeight = 70;
    filteredhistory.css('height', newHeight + 'px');
  }).on('mouseup', function () {
    isResizing = false;
  });
});

修正后的HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="row" id="showfilteredhistory">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
    <li>I</li>
    <li>J</li>
    <li>K</li>
    <li>L</li>
    <li>M</li>
    <li>N</li>
    <li>O</li>
    <li>P</li>
  </div>
  <div id="bottom-panel">
    <div id="drag">===========</div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Technosoft Patel