List with handler

List of number example

With Fluid DnD you dont have to drag the elements across its entire surface, just pass a handler selector to handlerSelector property that will be used to find the handler element as following:

<script setup lang="ts">
import { useDragAndDrop } from "fluid-dnd/vue";
import Handler from "./icons/handler.vue";

const list = $state([1, 2, 3, 4, 5]);
const handlerSelector = ".handler";
const [ parent ] = useDragAndDrop(list, { handlerSelector });

</script>

Creating the view

After, we’ll create the template and add the class handler to the Handler component:

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

Preview

• 1
• 2
• 3
• 4
• 5