Ok, i’m trying to take three elements and use javascript to reorder them (yes, i know there are likely libraries for this but I’m trying to keep the bloat down). I’m using AlpineJS as well which is why my syntax is like it is instead of something like var layoutOrder = [...
My array looks like this:
layoutOrder: [
'image',
'details',
'description'
]
There are three DIVs within a grid, like this:
<div :class="{ 'order-1': layoutOrder.indexOf('image', 1) == 1, 'order-2': layoutOrder.indexOf('image', 1) == 2, 'order-3': layoutOrder.indexOf('image', 1) == 3 }">Images</div>
<div :class="{ 'order-1': layoutOrder.indexOf('details', 1) == 1, 'order-2': layoutOrder.indexOf('details', 1) == 2, 'order-3': layoutOrder.indexOf('details', 1) == 3 }">Description</div>
<div :class="{ 'order-1': layoutOrder.indexOf('description', 1) == 1, 'order-2': layoutOrder.indexOf('description', 1) == 2, 'order-3': layoutOrder.indexOf('description', 1) == 3 }">Details / Specs</div>
By up / down buttons like function like this: moveDetailsUp(), moveDetailsDown(), etc.
What i can’t quite figure out is the cleanest way to rearrange the three items inside the layoutOrder array depending on which button was clicked and the current position of each item in the array at the time it was clicked.
Appreciate any help provided!