[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

[hungify]

Hey @vBenTec!
I experienced the same issue.
Thank you for your workaround, but it causes an error in console.log.

@formkit_drag-and-drop_vue.js?v=603f3c1b:1134 Uncaught TypeError: Cannot read properties of undefined (reading 'el')

[vBenTec]

Hey @vBenTec! I experienced the same issue. Thank you for your workaround, but it causes an error in console.log.

@formkit_drag-and-drop_vue.js?v=603f3c1b:1134 Uncaught TypeError: Cannot read properties of undefined (reading 'el')

It’s possible that there’s an issue in your component setup, particularly with how refs are being handled. I recommend verifying that both your refs are properly initialised when the component mounts and adding a guard clause (?) for an early return if necessary. Additionally, please ensure you’re using the same version as I did to rule out version inconsistencies.

[hungify]

Hey @vBenTec! I experienced the same issue. Thank you for your workaround, but it causes an error in console.log.

@formkit_drag-and-drop_vue.js?v=603f3c1b:1134 Uncaught TypeError: Cannot read properties of undefined (reading 'el')

It’s possible that there’s an issue in your component setup, particularly with how refs are being handled. I recommend verifying that both your refs are properly initialised when the component mounts and adding a guard clause (?) for an early return if necessary. Additionally, please ensure you’re using the same version as I did to rule out version inconsistencies.

Thanks for your help. I tested your version, and it worked without errors. The workaround is to update the draggable attribute using the DOM and JS instead.