Question

我有2个容器。一个包含3个元素，另一个仅包含一个。基本上我想实现两件事：

当用户减小窗口宽度（通过调整其大小）并达到某个值时，我想将某些元素从一个容器移动到另一个容器。
当用户增加窗口宽度（通过调整窗口大小）并达到某个值时，我想将这些项目移回上一个容器。

这是我到目前为止所做的：

//

var referenceWidth; // global variable to hold the viewport width reference. It's used to compare with the actual width.

window.onload = function() {
  referenceWidth = window.innerWidth; // assings the current window width to be used as a reference later.
}

window.onresize = function() { // monitors the resizing of the window
  var actualWidth = window.innerWidth; // assigns the current window width.
  var parent = document.getElementsByClassName('parent'); // take all parent elements (in the project there will be more than one).

  if (actualWidth < referenceWidth) { // if the actualWidth is lower than the referenceWidth than...

    // check if it reaches a value between 1000px and 900px while decreasing window width.
    if (actualWidth <= 1000 && actualWidth >= 900) {
      // sends each parent and the actual size to the X function.
      for (var i = 0; i < parent.length; i++) {
        x(parent[i], actualWidth);
      }
    } else if (actualWidth <= 780 && actualWidth >= 680) { // check if it reaches a value between 780px and 680px while decreasing window width.
      // sends each parent and the actual size to the Y function.
      for (var i = 0; i < parent.length; i++) {
        x(parent[i], actualWidth);
      }
    }
    referenceWidth = actualWidth; // updates the referenceWidth value
  } else if (actualWidth > referenceWidth) {
    // check if it reaches a value between 1000px and 900px while increasing window width.
    if (actualWidth <= 1000 && actualWidth >= 900) {
      for (var i = 0; i < parent.length; i++) {
        y(parent[i], actualWidth);
      }
    } else if (actualWidth <= 790 && actualWidth >= 780) { // check if it reaches a value between 780px and 680px while increasing window width.
      for (var i = 0; i < parent.length; i++) {
        y(parent[i], actualWidth);
      }
    }
    referenceWidth = actualWidth; // update the referenceWidth
  }

  // the function that puts the element in another element.
  function x(o, u) {
    var child = o.children; // receives the children elements from the parent sent.
    var checkWidth = u >= 900; // check if the width is greater than 900px. If true, it means that the third item is supposed to be moved.

    for (var i = 0; i < child.length; i++) {

      switch (checkWidth) {
        // move the third item to next child
        case true:
          var item = child[i].children[2];
          item.classList.add("flag");
          child[i + 1].insertBefore(item, child[i + 1].firstChild);
          break;
          // move the second item to the next child
        case false:
          var item = child[i].children[1];
          item.classList.add("flag");
          child[i + 1].insertBefore(item, child[i + 1].firstChild);
          break;
      }
    }
  }

  function y(o, u) {
    var child = o.children;
    var checkWidth = u >= 900;

    for (var i = 0; i < child.length; i++) {
      // the following code is supposed to get the elements back to the first child, but it doesn't works properly.
      if (child[i].children.length < 3) {
        switch (checkWidth) {
          // move the first item from the next child to the current child.
          case true:
            var item = child[i + 1].children[0];
            child[i].append(item);
            break;

            // move the first item from the next child to the current child.
          case false:
            var item = child[i + 1].children[0];
            child[i].append(item);
            break;
        }
      }
    }
  }
}

* {
  padding: 0px;
  margin: 0px;
  position: relative;
  box-sizing: border-box;
}

.parent {
  max-width: 900px;
  background-color: #fff;
  padding: 10px 30px 10px 20px;
  border: 1px solid #000;
  overflow: hidden;
  margin: auto;
}

.child {
  width: 100%;
  min-height: 250px;
  display: flex;
  justify-content: start;
  flex-wrap: nowrap;
  margin: 10px 0px;
  border: 1px solid #000;
}

.item {
  width: 206px;
  height: 200px;
  padding: 10px 5px;
  color: white;
  background: black;
  text-align: center;
  margin-left: 1px;
}

使用上面的代码会发生以下错误：

有时，这些项不会转到其他元素，主要是（但不仅是）当用户非常快速地调整窗口大小时。
某些项目返回到上一个容器时会更改顺序（请查看项目2和3）。

我该如何解决这些问题？还是有更好的方法制造相同的东西？

根据视口的宽度将元素从一个元素移到另一个

0 个答案: