isDraggable

List of number example

With Fluid DnD you can control which element can be dragged and which not using isDraggable property:

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

const list = ref([1, 2, 3, 4], {
isDraggable: (el) => !el.classList.contains("is-not-draggable"),
});
const [ parent ] = useDragAndDrop(list);

</script>

Creating the view

After, we’ll create the template and add is-not-draggable class to the even numbers:

<template>
  <ul ref="parent" class="number-list">
    <li
      class="number"
      v-for="(element, index) in list"
      :index="index"
      :class="{
        'is-not-draggable': element % 2 == 0,
      }"
      :key="element"
    >
      {{ element }}
    </li>
  </ul>
</template>

Preview

• 1
• 2
• 3
• 4