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 { useDragAndDrop } from "fluid-dnd/vue";

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

</script>

Next, create a list of numbers on svelte:

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

Caret about draggable CSS styles

Caution

Avoid to setting css transform property or transitions (transition-property, transition-timing-function, transition-duration, etc) to draggable elements because Fluid DnD update those properties automatically and can cause unexpected behavior.

Adding reference to parent element

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

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

Adding reference to children

For each <li> element we’ll pass the data-index attribute to knowing the actual position and pick the (element) value that uniquely identify each element:

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

Preview

• 1
• 2
• 3