Simple Draggable list with in sync to original list. Remove list
prop to break synchronization with original list.
{{ list }}
<template>
<vs-list>
<draggable :list="list" class="cursor-move">
<vs-list-item class="flex items-center p-1" v-for="(item, index) in list" :key="index" :title="item">
</vs-list-item>
</draggable>
</vs-list>
</template>
<script>
import draggable from 'vuedraggable'
export default {
data() {
return {
list: [
"Marzipan I love I love. Soufflé donut I love gummi bears powder. Candy danish biscuit.",
"Halvah bonbon bonbon brownie sugar plum. Halvah I love cupcake I love.",
"Cake muffin icing topping wafer topping gummi bears apple pie.",
"Cotton candy gummi bears bear claw cake brownie jelly-o lemon drops croissant sweet roll.",
]
}
},
components: {
draggable,
}
}
</script>