javascript - How to get vuedraggable to work in Vue 3? - Stack Overflow

admin管理员组

文章数量:1393085

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

Share Improve this question Follow asked Aug 9, 2023 at 4:37 ArloArlo 6111 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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

本文标签： javascriptHow to get vuedraggable to work in Vue 3Stack Overflow