Insert on list

List of number example

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

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

const list = ref([]);
const { parent, insertAt } = useDragAndDrop(list);
});

</script>

Creating the view

After, we’ll create the list with an add button that call insertAt:

<template>
   <ul ref="parent" class="number-list">
    <li class="number" v-for="(element, index) in list" :index="index" :key="element">
      {{ element }}
    </li>
  </ul>
  <button class="insert-button" @click="insertAt(list.length, list.length)">+</button>
</template>

Preview

+

Add inserting Class

You can add the css class setted when an element is inserted using the parameter insertingFromClass:

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

</script>

Changing styles

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

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

Preview

+

Add delay before insert

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

<script setup lang="ts">
// ...
const { parent, removeAt } = useDragAndDrop(list,{
  insertingFromClass: "inserting",
  delayBeforeInsert: 800
});});

</script>

Preview

+