如何使用jQuery使DIV行可调整大小

问题描述 投票：0回答：1

我正在研究一个调度小部件概念。基本思想是每周的每一天都有一排DIV。每行具有由DIV表示的固定数量的时间段。我希望能够通过拖动左侧的手柄来调整每个DIV的大小。最左边的DIV不能被拖动，但它会根据DIV右侧的大小调整大小。这继续向下行，即，当调整右侧的DIV大小时，左侧的DIV自动调整大小。我正在jQuery UI中使用Resizable小部件来进行基本调整大小功能。

我准备了一个示例小提琴：https://jsfiddle.net/profnimrod/rpzyv0nd/4/

出于某种原因，每个DIV左侧的可拖动手柄（除第一个之外）没有像我预期的那样移动。

每个DIV（除了第一个）之外的Fontawesome图标，我想用作调整大小手柄也没有显示。

关于如何解决这两个问题的任何想法。

请注意，DIV后面有一个包含该行的canvas元素。这里的意图是我将在某些点处添加行后面的图形元素（行DIV将是透明的）。

我开始的代码（在小提琴上可用）是：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Schedule test</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-6jHF7Z3XI3fF4XZixAuSu0gGKrXwoX/w3uFPxC56OtjChio7wtTGJWRW53Nhx6Ev" crossorigin="anonymous">
<style>
#container { width: 600px; height: 300px; }
#resizable1 { width: 150px; height: 50px; display:inline; float:left;}
#resizable2 { width: 150px; height: 50px; display:inline; float:left;}
#resizable3 { width: 150px; height: 50px; display:inline; float:left;}
#resizable4 { width: 142px; height: 50px; display:inline; float:left;}
#resizable1, #resizable2, #resizable3, #resizable4, #container { padding: 0em; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
  $( "#resizable2" ).resizable({
    grid: 50,
    handles: "w",
    maxHeight: 50,
    minHeight: 50,
    containment: "#container",
    resize: function(e, ui) {
        //var change = ui.size.width - ui.originalSize.width;
        if(ui.originalSize.width > ui.size.width)
        {
            $("#resizable1").width($("#resizable1").width() + 50);
        }
        else {
            $("#resizable1").width($("#resizable1").width() - 50);
        }
    }
});
  $( "#resizable3" ).resizable({
    grid: 50,
    handles: "w",
    maxHeight: 50,
    minHeight: 50,
    containment: "#container",
    resize: function(e, ui) {
        //var change = ui.size.width - ui.originalSize.width;
        if(ui.originalSize.width > ui.size.width)
        {
            $("#resizable2").width($("#resizable2").width() + 50);
        }
        else {
            $("#resizable2").width($("#resizable2").width() - 50);
        }
    }
});   
  $( "#resizable4" ).resizable({
    grid: 50,
    handles: "w",
    maxHeight: 50,
    minHeight: 50,
    containment: "#container",
    resize: function(e, ui) {
        //var change = ui.size.width - ui.originalSize.width;
        if(ui.originalSize.width > ui.size.width)
        {
            $("#resizable3").width($("#resizable3").width() + 50);
        }
        else {
            $("#resizable3").width($("#resizable3").width() - 50);
        }
    }
});   
});
</script>
</head>
<body>
<div class="scheduleWrapper">
    <div id="canvasOverlay" style="position:absolute; width:600px !important; display:block; z-index:9999">
        <div id="container" class="ui-widget-content">
            <div id="resizable1" class="ui-state-active">
            </div>
            <div id="resizable2" class="ui-state-active">
                <div class="ui-resizable-handle ui-resizable-w">
                    <span class="fa fa-cogs fa-fw"></span>
                </div>
            </div>
            <div id="resizable3" class="ui-state-active">
                <div class="ui-resizable-handle ui-resizable-w">
                    <span class="fa fa-cogs fa-fw"></span>
                </div>
            </div>
            <div id="resizable4" class="ui-state-active">
                <div class="ui-resizable-handle ui-resizable-w">
                    <span class="fa fa-cogs fa-fw"></span>
                </div>
            </div>
        </div>
    </div>
    <canvas style="width: 600px; height: 300px;"></canvas>
</div>
</body>
</html>
javascript jquery css html5 jquery-ui
1个回答
0
投票

考虑以下小提琴：https://jsfiddle.net/Twisty/0r8v47yL/29/

JavaScript的

$(function() {
  $(".re-size").resizable({
    grid: 50,
    handles: "w",
    maxHeight: 50,
    minHeight: 50,
    containment: "#container",
    resize: function(e, ui) {
      ui.position.top = 0;
      ui.position.left = 0;
      ui.size.height = 50;
    }
  });
});

我在DIV元素中添加了类，以便更容易分配。关于在w上调整大小的第一件事就是要调整元素的left和width。例如，如果你有：

<div id="resizable2" class="ui-state-active re-size item">
  <div class="ui-resizable-handle ui-resizable-w">
    <span class="fas fa-cogs fa-fw"></span>
  </div>
</div>

这在CSS中设置为150px宽度和50px高度，当我们拖动手柄时，left将更新为45px，宽度将更改为105px。从UI角度来看，这是用户期望操作要做的事情，左侧移动。对于您的项目，这不起作用。

这个问题没有解决的另一个问题是扩大元素变得更加困难。您可以查看event并查看鼠标移动，以查看用户是否正在尝试将鼠标移近左边缘。

更完整的例子：https://jsfiddle.net/Twisty/0r8v47yL/61/

HTML

<div class="scheduleWrapper">
  <div id="canvasOverlay" style="position:absolute; width:600px !important; display:block; z-index:9999">
    <div id="container" class="ui-widget-content">
      <div id="resizable1" class="ui-state-active no-re-size item">
      </div>
      <div id="resizable2" class="ui-state-active re-size item">
        <div class="ui-resizable-handle ui-resizable-w">
          <span class="fas fa-cogs fa-fw"></span>
        </div>
      </div>
      <div id="resizable3" class="ui-state-active re-size item">
        <div class="ui-resizable-handle ui-resizable-w">
          <span class="fas fa-cogs fa-fw"></span>
        </div>
      </div>
      <div id="resizable4" class="ui-state-active re-size item">
        <div class="ui-resizable-handle ui-resizable-w">
          <span class="fas fa-cogs fa-fw"></span>
        </div>
      </div>
    </div>
  </div>
  <canvas style="width: 600px; height: 300px;"></canvas>
</div>

JavaScript的

$(function() {
  $(".re-size").resizable({
    handles: "w",
    containment: "#container",
    resize: function(e, ui) {
      //console.log(e);
      var x = e.originalEvent.originalEvent.movementX;
      ui.position.top = 0;
      ui.position.left = 0;
      ui.size.height = 50;
      if (x < 0) {
        console.log(ui.size.width + Math.abs(x));
        ui.element.width(ui.size.width + 50);
      } else {
        ui.size.width = ui.size.width - 50;
      }
    }
  });
});

希望这可以帮助。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.