Single vertical list

List of number example

To showing how to use Fluid DnD for sorting a single list. First, we’re going to create a list of numbers:

<script setup lang="ts">
import { ref } from "vue";
import { useDragAndDrop } from "fluid-dnd/vue";

const list = ref([1, 2, 3]);
const [ parent ] = useDragAndDrop(list);

</script>

Next, create a list of numbers on vue template:

<template>
  <ul class="number-list">
    <li class="number" v-for="(element, index) in list">
      {{ element }}
    </li>
  </ul>
</template>
<style>
  .number {
    border-style: solid;
    padding-left: 5px;
    margin-top: 0.25rem;
    border-width: 2px;
  }
  .number-list {
    display: block;
    padding: 10px;
  }
</style>

Caution

Avoid to setting css transform property or transitions to draggable elements because Fluid DnD update those properties automagically.

Adding reference to parent element

First, add a reference to the created parent element from useDragAndDrop:

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

Adding reference to children

For each <li> element we’ll pass the index attribute to knowing the actual position and the key attribute that uniquely identify each element:

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

Preview

• 1
• 2
• 3