Question

Page layout

如图所示，我想通过向上拖动来调整“文档图标”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');
        });
    }
});

Answer 1

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

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<!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>

＆＃13;

通过拖动调整div的大小

1 个答案: