为什么添加新项目时弹性容器中的项目没有重新排序？答案

【问题标题】：Why are items in a flex container not reordered when adding a new item?为什么添加新项目时弹性容器中的项目没有重新排序？
【发布时间】：2022-02-10 21:05:27
【问题描述】：

我有两个包含弹性项目的弹性容器，每个容器都有一个订单属性。每个弹性项目都有一个事件监听器。当点击一个 flex 项（在本例中为 div）时，div 会移动到另一个 flex 容器。

但是，例如，如果我单击下面顺序为 1 的 div，新位置将位于 ID 为 #non-selected 的容器中顺序为 3 的 div 的右侧。所以在某种程度上，flex 容器没有更新。我做错了什么还是这是预期的行为？我运行版本 91.4.0esr、Firefox for openSUSE Leap、openSUSE-15.2 和 Google Chrome 版本 98.0.4758.80（官方构建）（64 位）。

function moveOption() {

  let optionDivs = document.querySelectorAll('.item');

  optionDivs.forEach(function(div) {
    div.addEventListener('click', function() {
      if (this.parentElement.id === 'non-selected') {
        document.getElementById('selected').append(div);
      } else {
        document.getElementById('non-selected').append(div);
      }
    });
  });
}

moveOption();

#selected,
#non-selected {
  width: 50%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
  padding: 3px;
  gap: 3px;
  background-color: white;
  height: 50px;
  max-height: 100px;
}

.item {
  border: 1px solid black;
  border-radius: 4px;
  background-color: #ccc;
  cursor: grab;
  width: max-content;
  box-sizing: border-box;
  align-items: center;
  display: flex;
  height: 40px;
  padding-right: 5px;
  padding-left: 5px;
}

<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta charset="utf-8">
  <script type="module" src="bc-select.js"></script>
</head>

<body>
  Click or Order 1 &quot;button&quot; and it will be positioned right to the Order 3 &quot;button&quot; despite it has a lower value for the order property.
  <div id="selected">
    <div order="1" class="item">Order 1</div>
    <div order="2" class="item">Order 2</div>
  </div>

  <div id="non-selected">
    <div order="3" class="item">Order 3</div>
  </div>

</body>

</html>

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。
我明天会解决这个问题:-)

标签： javascript html css flexbox

【解决方案1】：

非标准的order 属性不会影响 Flex 或 Grid 容器中的排序。您需要改为设置the order CSS property。

所以而不是：

<div order="1">

你需要：

<div style="order:1;">

更新的演示：

function moveOption() {

  let optionDivs = document.querySelectorAll('.item');

  optionDivs.forEach(function(div) {
    div.addEventListener('click', function() {
      if (this.parentElement.id === 'non-selected') {
        document.getElementById('selected').append(div);
      } else {
        document.getElementById('non-selected').append(div);
      }
    });
  });
}

moveOption();

#selected,
#non-selected {
  width: 50%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
  padding: 3px;
  gap: 3px;
  background-color: white;
  height: 50px;
  max-height: 100px;
}

.item {
  border: 1px solid black;
  border-radius: 4px;
  background-color: #ccc;
  cursor: grab;
  width: max-content;
  box-sizing: border-box;
  align-items: center;
  display: flex;
  height: 40px;
  padding-right: 5px;
  padding-left: 5px;
}

<div id="selected">
  <div style="order:1;" class="item">Order 1</div>
  <div style="order:2;" class="item">Order 2</div>
</div>

<div id="non-selected">
  <div style="order:3;" class="item">Order 3</div>
</div>

【讨论】：