isDraggable

Ejemplo de lista de números

Con Vue Fluid DnD, tu puedes controlar cual elemento puede ser arrastrado y cual no usando la propiedad isDraggable:

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

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

</script>

Creando la vista

Después, crearemos el template y añadiremos la clase is-not-draggable a los números pares:

<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>

Resultado

• 1
• 2
• 3
• 4