I've been trying to get vuedraggable to work. I've copied the code pretty much exactly from here: .draggable.next

Here's my test ponent:

<script setup>
import { ref } from "vue"
import draggable from "vuedraggable"
const drag = ref(false)
const data = ref([
    {
        id: 1,
        name: "John"
    },
    {
        id: 2,
        name: "Joao"
    },
    {
        id: 3,
        name: "Jean"
    }
])
</script>

<template>
    <draggable 
        v-model="data" 
        group="people" 
        @start="drag=true" 
        @end="drag=false" 
        item-key="id">
        <template #item="{element}">
            <div>{{element.name}}</div>
        </template>
    </draggable>
</template>

This crashes the app with the following warnings and error:

If I change the code to add a header slot like this:

...
<template>
    <draggable 
        v-model="data" 
        group="people" 
        @start="drag=true" 
        @end="drag=false" 
        item-key="id">
        <template #header>
            <div>Header</div>
        </template>
        <template #item="{element}">
            <div>{{element.name}}</div>
        </template>
    </draggable>
</template>
...

Then I get a slightly different error:

What am I missing?

I've been trying to get vuedraggable to work. I've copied the code pretty much exactly from here: https://github./SortableJS/vue.draggable.next

Here's my test ponent:

<script setup>
import { ref } from "vue"
import draggable from "vuedraggable"
const drag = ref(false)
const data = ref([
    {
        id: 1,
        name: "John"
    },
    {
        id: 2,
        name: "Joao"
    },
    {
        id: 3,
        name: "Jean"
    }
])
</script>

<template>
    <draggable 
        v-model="data" 
        group="people" 
        @start="drag=true" 
        @end="drag=false" 
        item-key="id">
        <template #item="{element}">
            <div>{{element.name}}</div>
        </template>
    </draggable>
</template>

This crashes the app with the following warnings and error:

If I change the code to add a header slot like this:

...
<template>
    <draggable 
        v-model="data" 
        group="people" 
        @start="drag=true" 
        @end="drag=false" 
        item-key="id">
        <template #header>
            <div>Header</div>
        </template>
        <template #item="{element}">
            <div>{{element.name}}</div>
        </template>
    </draggable>
</template>
...

Then I get a slightly different error:

What am I missing?

• javascript
• vue.js
• vuejs3
• vuedraggable

2 Answers 2

After playing around with this for a while, I tried copying the actual src folder (not dist) from the GitHub repo and just importing the draggable ponent from vuedraggable.js, and it works as expected. There must be something weird going on with the piled files.

Use the new version, suitable for Vue3

npm install vue-draggable-next

https://www.npmjs./package/vue-draggable-next