<script>
import { flip } from "svelte/animate"
import { sineInOut } from "svelte/easing"
let list = ["Alan", "Bridget", "Charlie", "Diana", "Emma", "Fred"]
let selected = {}
$: {
const [person, newRank] = Object.entries(selected).at(0) || []
if (person && newRank) {
const personIdx = list.indexOf(person)
list.splice(personIdx, 1)
list = [
...list.slice(0,newRank-1),
person,
...list.splice(newRank-1)
]
}
selected = {};
}
</script>
<h1>Rank Example</h1>
<ol>
{#each list as person, idx (person)}
<li animate:flip={{easing: sineInOut }}>
{person}
<select bind:value={selected[person]}>
<option type="hidden" value={undefined}>Please select rank</option>
{#each Array.from(Array(list.length).keys()) as r}
{#if r != idx}
<option value={r+1}>{r+1}</option>
{/if}
{/each}