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

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

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

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>