Как изменить размер ряда DIV с помощью jQuery - PullRequest
Новая
       5

Как изменить размер ряда DIV с помощью jQuery

0 голосов
/ 07 марта 2019

Я работаю над концепцией виджета планирования.Основная идея состоит в том, чтобы иметь ряд DIV для каждого дня недели.Каждая строка имеет фиксированное количество периодов времени, представленных DIV.Я хочу иметь возможность изменять размер каждого DIV, перетаскивая ручку на левой стороне.Крайний левый DIV нельзя перетаскивать, но его размер изменяется в зависимости от изменения размера DIV справа.Это продолжается вниз по строке, т. Е. Размер DIV слева изменяется автоматически при изменении размера DIV справа.Я использую виджет Resizable в jQuery UI для базовой функции изменения размера.

Я подготовил пример скрипта по адресу: https://jsfiddle.net/profnimrod/rpzyv0nd/4/

По какой-то причине перетаскиваемый дескриптор на левой сторонекаждого DIV (кроме первого) движется не так, как я ожидал.

Значок Fontawesome внутри каждого DIV (кроме первого), который я хотел бы использовать в качестве маркера изменения размера:также не отображается.

Любые идеи о том, как решить эти две проблемы.

Обратите внимание, что за 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>

1 Ответ

0 голосов
/ 07 марта 2019

Рассмотрим следующую скрипку: 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.С точки зрения пользовательского интерфейса это то, что пользователь ожидает от действия, левая часть перемещается.Для вашего проекта это не очень хорошо работает.

Другая проблема, к которой это не относится, заключается в том, что расширение элемента становится более трудным.Вы можете посмотреть на 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;
      }
    }
  });
});

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...