List with inputs

List of number example

To showing how to use Fluid DnD for sorting a list with editable data. First, we’re going to create a list of people:

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

const list = ref([
  { number: 1, name: "Carlos", edit: false },
  { number: 2, name: "Jorge", edit: false },
  { number: 1, name: "Ivis", edit: false },
]);
const [ parent ] = useDragAndDrop(list);

</script>

Next, create a list of people on vue template and pass the attributes to be modified to v-model:

</script>
<template>
  <ul ref="parent" class="person-list p-8 bg-[var(--sl-color-gray-6)]">
    <li class="person" v-for="(person, index) in list" :index="index">
      <input type="text" v-model="person.name" :disabled="!person.edit" />
      <input type="checkbox" v-model="person.edit" />
    </li>
  </ul>
</template>

<style>
.person {
  border-style: solid;
  padding-left: 5px;
  margin-top: 0.25rem;
  border-width: 2px;
}
.person input[type="text"] {
  width: 100px;
  margin: 10px;
}
.person-list {
  display: block;
  padding-inline: 25px;
}
</style>

Preview