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 { ref } from "vue";
import { useDragAndDrop } from "fluid-dnd/vue";
import Handler from "./icons/handler.vue";

const list = ref([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:

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

List with handler

List of number example

Creating the view

Preview