我有两个包含flex项的flex容器，每个容器都有一个order属性。每个flex项都有一个事件侦听器。当单击一个flex项(本例中为div(时，div会移动到另一个flex容器。
但是，例如，如果我单击下面顺序为1的div，则新位置将位于id为#的容器中顺序为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 "button" and it will be positioned right to the Order 3 "button" 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>非标准的order属性不会影响Flex或Grid容器中的排序。您需要改为设置orderCSS属性。
所以不是：
<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>