Dragging styles

List of number example

To showing how to use Fluid DnD to adding dragging styles. First, we’re going to create a list of numbers setting the name of the draggingclass:

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

const list = $state([1, 2, 3]);
const [ parent ] = useDragAndDrop(list,{
  draggingClass: "dragging",
});

</script>

Creating the view

Next, create the list of number on the view section and the class selector for dragging:

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

<style>
/*....*/
.dragging {
  transition: background-color color 150ms ease-in, color 150ms ease-in;
  background-color: var(--sl-color-gray-1);
  color: black;
}
</style>

Preview

• 1
• 2
• 3