[Vue] HTML draggable attribute not set correctly when using draggable callback

[vBenTec]

In my use case, I have a list of items that should only be draggable when a specific button is clicked. To achieve this, I used the draggable callback to control whether each item can be dragged.

The callback works as expected: items are not draggable when the mode is inactive. However, the HTML element does not have its draggable attribute properly set to false, which should prevent the user from dragging the item.

Expected:
When the draggable callback returns false, the corresponding HTML element should have its draggable attribute set to false, preventing the user from dragging the item.

Actual:
Although the draggable callback prevents dragging in the non-draggable mode, the HTML element's draggable attribute is not being set to false. As a result, users are still able to drag the item around despite the mode being inactive.

Code Example:

I am currently working around this issue by manually setting the draggable attribute within the callback, but it would be ideal if the library handled this natively.

 dragAndDrop({
  parent: parent,
  values: items,
  plugins: [animations()],
  draggable: (el) => {
    // Workaround to set the attribute manually
    el.setAttribute('draggable', isReordering.value.toString())
    return isReordering.value
  },
})

Versions:

• Vue: ^3.4.34
• Formkit/drag-and-drop: ^0.1.6

Browser:

• Chrome on MacOS: 15.0

[sebastiandotdev]

Hello @sashamilenkovic,

Something similar happens to me, when I close the element modal the reactivity in the Drag And Drop elements stops working.

Do you know what this could be due to?

Code

<script setup lang="ts">
import { animations } from '@formkit/drag-and-drop'
import { useDragAndDrop } from '@formkit/drag-and-drop/vue'

const route = useRoute()
const nuxtApp = useNuxtApp()

const [parent, categories] = useDragAndDrop<{ category: string }>([], {
  plugins: [
    animations(),
  ],
})

async function getCategories() {
  try {
    const res = await nuxtApp.$urlEfici.get<Reply<{ category: string }[]>>(`${nuxtApp.$endpoint.products.getCategories.url}${route.params.id}`)

    if (res.data.error)
      throw new Error('No se pudo obtener las categorias', { cause: res.data.message })

    categories.value = res.data.data
  }
  catch (error) {
    console.error((error as Error).message)
    return error
  }
}


onMounted(() => {
  getCategories()
})
</script>

<template>
<Dialog>
<div class="p-5 max-h-[480px] overflow-y-auto scrollbar">
    <h4 class="py-3 text-lg font-bold">
        Listado de categorías
     </h4>
      <ul ref="parent" class="space-y-4">
         <li
            v-for="({ category }) in categories"
            :key="category"
            class="shadow rounded-md bg-white p-3 flex items-center justify-between cursor-grab"
          >
             <span class="flex items-center gap-3">
                   {{ category }}
             </span>
          </li>
      </ul>
      <button
          class="btn btn-primary mt-5"
          @click="handleSortedCategory"
           >
            Ordenar Categorías
      </button>
</div>
</Dialog>
</template>

Bug

When I open the modal in the first render of the component, Drag And Drop works, but when I close the modal, the sortable elements stop working.

Preview

Grabacion.de.pantalla.2024-11-06.a.la.s.1.48.11.p.m.mov