Tengo dos contenedores flexibles que contienen elementos flexibles, cada uno con una propiedad de pedido. Cada elemento flexible tiene un detector de eventos. Al hacer clic en un elemento flexible (un div en este caso), el div se mueve al otro contenedor flexible.
Pero si, por ejemplo, hago clic en el div con el pedido 1 a continuación, la nueva posición estará a la derecha del div con el pedido 3 en el contenedor con id # no seleccionado. Entonces, de alguna manera, el contenedor flexible no se actualiza. ¿Hago algo mal o es este el comportamiento esperado? Ejecuto la versión 91.4.0esr, Firefox para openSUSE Leap, openSUSE-15.2 y Google Chrome versión 98.0.4758.80 (compilación oficial) (64 bits).
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>El atributo de order no estándar no afecta el pedido dentro de un contenedor Flex o Grid. En su lugar, debe establecer la propiedad order CSS .
Así que en lugar de:
<div order="1">necesitas:
<div style="order:1;">Demostración actualizada:
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>