[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