为什么在添加新项目时不对 flex 容器中的项目重新排序？

Question

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

但是，例如，如果我单击下方订单 1 的 div，新位置将位于 ID 为 #non-selected 的容器中订单 3 的 div 的右侧.所以在某种程度上，弹性容器没有更新。我做错了什么还是这是预期的行为？我运行版本 91.4.0esr，适用于 openSUSE Leap、openSUSE-15.2 的 Firefox 和 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>

Answer 1

non-standard 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>

为什么在添加新项目时不对 flex 容器中的项目重新排序？

Why are items in a flex container not reordered when adding a new item?

html

javascript

css

flexbox