Single horizontal list

List of number example

In this example we’ll use Fluid DnD for sorting a horizontal list. First, we’re going to create a list of numbers and adding the property direction with value horizontal:

<script lang="ts">
    const list = $state([1, 2, 3, 4, 5]);
    const [ parent ] = useDragAndDrop(list, { direction: "horizontal" });
</script>

Creating the view

<div use:parent class="number-list">
  {#each list as element, index (element)}
    <div class="number" data-index = {index}>
      { element }
    </div>
  {/each}
</div>

<style>
/* ... */
.number-list {
  display: flex;
  flex-direction: row;
}
</style>

Preview

1

2

3

4

5