I have two flex containers containing flex items, each with an order property. Each flex item has an event listener. When clicking on a flex item (a div in this case) the div moves to the other flex container.
But if I for instance click on the div with order 1 below, the new position will be to the right of the div with order 3 in the container with id #non-selected. So in some way the flex container is not updated. Do I do something wrong or is this the expected behaviour? I run Version 91.4.0esr, Firefox for openSUSE Leap, openSUSE-15.2 and Google Chrome Version 98.0.4758.80 (Official Build) (64-bit).
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>The non-standard order attribute does not affect ordering within a Flex or Grid container. You need to set the order CSS property instead.
So instead of:
<div order="1">
you need:
<div style="order:1;">
Updated demo:
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>