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 setup lang="ts">
    const list = ref([1, 2, 3, 4, 5]);
    const [ parent ] = useDragAndDrop(list, { direction: "horizontal" });
</script>

Creating the view

<template>
  <div ref="parent" class="number-list">
    <div class="number" v-for="(element, index) in list" :index="index">
      {{ element }}
    </div>
  </div>
</template>

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

Preview

1

2

3

4

5