isDraggable

List of number example

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

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

const list = $state([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 view and add is-not-draggable class to the even numbers:

<ul use:parent class="number-list">
  {#each list as element, index (element)}
    <li class="number { element % 2 == 0? 'is-not-draggable' : ''}" data-index={index}>
     { element }
    </li>
  {/each}
</ul>

Preview

• 1
• 2
• 3
• 4