Remove on list

List of number example

To showing how to use Fluid DnD for removing elements from a list. First, we’re going to create a list and extract the removeAt function from useDragAndDrop:

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

const list = ref([1, 2, 3, 4, 5]);
const [ parent,_, removeAt ] = useDragAndDrop(list);

</script>

Creating the view

After, we’ll create the list with an remove button for each element that call removeAt:

<template>
   <ul ref="parent" class="number-list">
    <li class="number" v-for="(element, index) in list" :index="index" :key="element">
      {{ element }}
      <button class="remove-button" @click="removeAt(index)">x</button>
    </li>
  </ul>
</template>

Preview

Add removing Class

You can add the css class setted when an element is removed using the parameter removingClass:

<script setup lang="ts">
// ...
const { parent, removeAt } = useDragAndDrop(list,{
  removingClass: "removed"
});

</script>

Changing styles

After, we’ll add the removed styles and transition when the class is setted:

<style scoped>
.number{
  /*
      ...
  */
  opacity: 1;
  transition: opacity 200ms ease;
}
.number.removed{
  opacity: 0;
}
</style>

Preview

Add delay before remove

You can add the amount of delay time in miliseconds before removing the element (the default is 200 miliseconds):

<script setup lang="ts">
// ...
const { parent, removeAt } = useDragAndDrop(list,{
  removingClass: "removed",
  delayBeforeRemove: 800
});});

</script>