jQuery Пользовательский интерфейс несколько изменяемого размера div не больше родительского div - PullRequest
Новая
       15

jQuery Пользовательский интерфейс несколько изменяемого размера div не больше родительского div

0 голосов
/ 20 января 2020

У меня есть родительский div. Родительский div содержит пять других div (рядом друг с другом). То, что я пытаюсь сделать, это сделать размеры этих div'ов изменяемыми с помощью jQuery UI.

Проблема (которая усложняет для меня) состоит в том, что изменяемая ширина всех пяти div не может быть больше чем ширина родительского div. Например:

  • Допустим, родительский элемент имеет ширину 500 пикселей (на моем экране это 100%).
  • Каждый div внутри родительского элемента div имеет ширину 100 пикселей (включает поле и границу);

Когда размер div 1 изменяется от 100 до 200 пикселей, происходит следующее:

  • Div 1 теперь имеет ширину 200 пикселей.
  • Div 2, 3, 4 и 5 имеют ширину 75 пикселей (поскольку 500px - 300px = 200px / 4 = 75px каждый).

Я добавил пример кода и изображение ниже. Я использовал пример, который нашел в StackOverflow, и настроил его. Почему этот пример не работает правильно? Почему div перемещаются на следующую строку и не останавливаются в конце экрана?

Спасибо за помощь.

Resizable divs

<style>
body, html {
    margin: 0;
    padding: 0;
}
#app {
    width: 100%;
    height: 100%;
}
#resultColumns {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    padding: 10px;
}
.columnContainer {
    min-width: 100px;
    height: 100%;
    background-color: #eeeeee;
    float: left;
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #333333;
}
.lastColumnContainer {
    border-right: 1px solid #333333;
}
.columnHeader {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}
.columnContent {
    font-size: 14px;
    text-align: left;
}
</style>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<html>
    <body>
        <div id="app">
            <div id="resultColumns">
                <!-- First Column -->
                <div class="columnContainer">
                    <div class="columnHeader">Title 1</div>
                    <div class="columnContent">Content 1</div>
                </div>
                <!-- Second Column -->
                <div class="columnContainer">
                    <div class="columnHeader">Title 2</div>
                    <div class="columnContent">Content 2</div>
                </div>
                <!-- Third Column -->
                <div class="columnContainer">
                    <div class="columnHeader">Title 3</div>
                    <div class="columnContent">Content 3</div>
                </div>
                <!-- Fourth Column -->
                <div class="columnContainer">
                    <div class="columnHeader">Title 4</div>
                    <div class="columnContent">Content 4</div>
                </div>
                <!-- Fifth Column -->
                <div class="columnContainer lastColumnContainer">
                    <div class="columnHeader">Title 5</div>
                    <div class="columnContent">Content 5</div>
                </div>
            </div>
        </div>
    </body>
</html>

<script>
    makeResizable();
    function makeResizable() {
        $('#resultColumns .columnContainer:eq(0)').resizable({
            maxWidth: getMaxWidth($('#resultColumns .columnContainer:eq(0)')),
            stop: updateMaxWidth,
            handles: 'e'
        });
        $('#resultColumns .columnContainer:eq(1)').resizable({
            maxWidth: getMaxWidth($('#resultColumns .columnContainer:eq(1)')),
            stop: updateMaxWidth,
            handles: 'e'
        });
        $('#resultColumns .columnContainer:eq(2)').resizable({
            maxWidth: getMaxWidth($('#resultColumns .columnContainer:eq(2)')),
            stop: updateMaxWidth,
            handles: 'e'
        });
        $('#resultColumns .columnContainer:eq(3)').resizable({
            maxWidth: getMaxWidth($('#resultColumns .columnContainer:eq(3)')),
            stop: updateMaxWidth,
            handles: 'e'
        });
        $('#resultColumns .columnContainer:eq(4)').resizable({
            maxWidth: getMaxWidth($('#resultColumns .columnContainer:eq(4)')),
            stop: updateMaxWidth,
            handles: 'e'
        });
    }
    function getMaxWidth(e) {
        return $('#resultColumns').width() - e.siblings().outerWidth() - 10; // 10px for the borders (2px each) - 5 divs in total
    }
    function updateMaxWidth(e, ui) {
        ui.element.siblings().resizable('option', 'maxWidth', getMaxWidth(ui.element.siblings()));
    }
</script>

1 Ответ

1 голос
/ 20 января 2020

Проблема здесь в том, что вы должны вычислять фрагменты для каждого изменяемого размера, включая границы. Первоначально вы смотрите на первый элемент и вычисляете maxWidth для других элементов одного уровня. для вашего примера, это остальные 4 элемента.

Если вы возьмете один из других элементов, скажем, 3-й, остальные оставшиеся ближайшие братья и сестры должны быть обновлены, так что их maxWidth - это оставшаяся часть. 

$(function() {
  function getPad(o, d) {
    return parseInt(o.css("padding-" + d));
  }

  function getMaxWidth(o) {
    var mw = parseInt(o.parent().innerWidth()) - (getPad(o.parent(), "left") + getPad(o.parent(), "right"));
    var sbw = 2; // First & Last Border
    o.siblings(".columnContainer").each(function(i, el) {
      sbw += parseInt($(el).width()) + 1; // Inner Border
    });
    return mw - sbw;
  }

  function makeResizable() {
    $('#resultColumns .columnContainer').resizable({
      handles: 'e',
      maxWidth: getMaxWidth($("#resultColumns .first")),
      resize: function(e, ui) {
        console.log($(this).width(), getMaxWidth($(this)));
      },
      stop: function(e, ui) {
        $(this).siblings().each(function(i, el) {
          $(el).resizable("option", "maxWidth", getMaxWidth($(el)));
        });
      }
    });
  }

  makeResizable();
});
html,
body {
  margin: 0;
  padding: 0;
}

#app {
  width: 100%;
  height: 100%;
}

#resultColumns {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  padding: 10px;
}

.columnContainer {
  min-width: 100px;
  height: 100%;
  background-color: #eeeeee;
  float: left;
  border-top: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #333333;
}

.last {
  border-right: 1px solid #333333;
}

.columnHeader {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.columnContent {
  font-size: 14px;
  text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<div id="app">
  <div id="resultColumns">
    <!-- First Column -->
    <div class="columnContainer first">
      <div class="columnHeader">Title 1</div>
      <div class="columnContent">Content 1</div>
    </div>
    <!-- Second Column -->
    <div class="columnContainer">
      <div class="columnHeader">Title 2</div>
      <div class="columnContent">Content 2</div>
    </div>
    <!-- Third Column -->
    <div class="columnContainer">
      <div class="columnHeader">Title 3</div>
      <div class="columnContent">Content 3</div>
    </div>
    <!-- Fourth Column -->
    <div class="columnContainer">
      <div class="columnHeader">Title 4</div>
      <div class="columnContent">Content 4</div>
    </div>
    <!-- Fifth Column -->
    <div class="columnContainer last">
      <div class="columnHeader">Title 5</div>
      <div class="columnContent">Content 5</div>
    </div>
  </div>
</div>
...