I'm using VueJS 3 with "vue-draggable-next": "^2.1.1".
Nothing happens when I try to drag.
I see in the HTML this:
<div class="flex m-10" data-v-52c58f0f="">
<draggable list="[object Object],[object Object],[object Object],[object Object]" data-v-52c58f0f="">
<div class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center" data-v-52c58f0f="">John</div>
<div class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center" data-v-52c58f0f="">Joao</div>
<div class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center" data-v-52c58f0f="">Jean</div>
<div class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center" data-v-52c58f0f="">Gerard</div>`
</draggable>
</div>
When I implement the code like this:
import { VueDraggableNext } from "vue-draggable-next";
components: { draggable: VueDraggableNext },
with
list: [
{ name: 'John', id: 1 }, { name: 'Joao', id: 2 }, { name: 'Jean', id: 3 }, { name: 'Gerard', id: 4 }, ],
and im the template I already tried:
<draggable class="dragArea list-group w-full" :list="list" @change="log"> <div class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center" v-for="element in list" :key="element.name" > {{ element.name }} </div> </draggable>
and this:
<draggable
:list="list"
:disabled="!enabled"
item-key="name"
class="list-group"
ghost-class="ghost"
:move="checkMove"
@start="dragging = true"
@end="dragging = false"
>
<template #item="{ element }">
<div class="list-group-item" :class="{ 'not-draggable': !enabled }">
{{ element.name }}
</div>
</template>
</draggable>
In the case where I use
<template #item="{ element }">
Nothing is showing, and in the other case, nothing is draggable.
The component is loaded, I can see it with the Vue extension for Chrome:
Does anyone have any idea why it is not working?
Edit: This is an example, why you should post your whole code...
So, after hours and hours of trying different things, I came across that I have added, components: to the data(). Now, it works fine with this:
export default {
components: {
draggable: VueDraggableNext },
and this is what I was doing:
data() {
return {
components: {
draggable: VueDraggableNext
},
Hope this helps someone in the future...