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 setup lang="ts">
import { ref } from "vue";
import { useDragAndDrop } from "fluid-dnd/vue";

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

</script>

Creating the view

Next, create the list of number on vue template and the class selector for dragging:

<template>
  <ul ref="parent" class="block px-6 p-8">
    <li
      class="number border-solid mt-1 pl-1 border-2"
      v-for="(element, index) in list"
      :index="index"
    >
      {{ element }}
    </li>
  </ul>
</template>

<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