通过拖动调整 div 的大小答案

【问题标题】：Resizing of div by dragging通过拖动调整 div 的大小
【发布时间】：2015-06-15 05:10:20
【问题描述】：

如图所示，我想通过向上拖动来调整“文档图标”Div 的大小，并且应该通过降低“文档查看器”的高度来适应它。我需要一个临时滑块来显示屏幕上的拖动。

问题已修改：HTML

<div id="centerDiv" class="centerDiv" style="position:relative;float: left;width: 63%;height: 600px;border-right: 10px solid #ddd;">

<div class="header" style="width: 100%;height: 15px;background-color: #ddd;"></div>

<div class="documentViewer" id="documentViewer" style="width: 100%;height: 500px;margin-bottom: 5px;">
    <iframe id="frameValue" name="frameValue" src="NoDocument.html" width="100%" height="500px" style="margin-bottom: 5px;"></iframe>
</div>

<div class="dragDiv" id="dragDiv" style="width: 100%;height: 15px;cursor: row-resize;background-color: green;"></div>

<div class="iconList" id="iconParent" style="position:relative;width: 100%;height: 70px;background-color: #ddd;"></div>

Jquery

$('#dragBar').mousedown(function(e) {
    e.preventDefault();
    dragging = true;

    var main = $('#documentViewer');

    var scrollBar = $("<div>'",
                    {id:'scrollBar',
                    css: {
                        height: '5px',
                        top:'530px',
                        left:'40px',
                        z-index:'100',
                        background-color: 'red'
                     }
                    }).appendTo('body');
    $(document).mousemove(function(e) {
      scrollBar.css("top",e.pageX+2);
   });

    if(dragging) {            
        $(window).mouseup(function(e) {
            $('#position').html(e.pageX +', '+ e.pageY);
            $('#iconParent').css("height",e.pageY+2);
            $('#documentViewer').css("height",(600-(e.pageY+30)));
            $(document).unbind('mousemove');
        });
    }
});

【问题讨论】：

请在此处移植您的代码
希望你得到答案。看看这个答案。 stackoverflow.com/a/20722118/2818107

标签： jquery html css resize draggable

【解决方案1】：

您可以使用 jQuery UI 来完成类似的事情。它支持调整某些项目的大小。您可以找到示例here。虽然这是在元素本身而不是另一个元素上。但你可以这样做：

$("#resizable").resizable();

#resizable {
  width: 150px;
  height: 150px;
  padding: 0.5em;
}
#resizable h3 {
  text-align: center;
  margin: 0;
}
.buttons {
  position: absolute;
  bottom: 0px;
  text-align: center;
}
.content {
  height: auto;
  overflow: scroll;
  overflow-x: hidden;
  height: 100%;
  margin-top: -5px;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery UI Resizable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
</head>

<body>

  <div id="resizable" class="ui-widget-content">
    <p class="content">Content
      <br />Content
      <br />Content
      <br />Content
      <br />Content
      <br />Content
      <br />Content
      <br />
    </p>
    <div class="buttons">buttons</div>
  </div>


</body>

</html>

【讨论】：

Jquery UI 库哪个版本支持这个功能？
不确定，您应该始终尝试使用最新版本。但从 1.6 起，它就在那里。
得到了.resizable()的非jquery版本？