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 = $state([
  { 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 the view and pass the attributes to be modified with bind directives:

</script>
<template>
  <ul ref="parent" class="person-list p-8 bg-[var(--sl-color-gray-6)]">
    {#each list as  person, index (person.number) }
      <input type="text" bind:value={person.name}  disabled={!person.edit}/>
      <input type="checkbox" bind:checked={person.edit} />
    {/each}
  </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