Question

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

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

由于某些原因，每个DIV（第一个DIV除外）左侧的可拖动手柄没有按我期望的那样移动。

每个DIV（第一个DIV除外）内的Fontawesome图标也没有显示。

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

请注意，DIV后面有一个画布元素，其中包含该行。目的是在某个时候在行后添加图形元素（行DIV将是透明的）。

我开始使用的代码（在Fiddle中可用）是：

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

Answer 1

考虑以下小提琴：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;
      }
    }
  });
});

希望这会有所帮助。

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

1 个答案: