Drag and drop items of more than one list. Add same group
to group
prop
People Group 1: {{ list1 }}
People Group 2: {{ list2 }}
<template>
<vs-list>
<vs-list-header title="People Group 1" color="primary"></vs-list-header>
<draggable :list="list1" group="people" class="p-2 cursor-move">
<vs-list-item v-for="(listItem, index) in list1" :key="index" :title="listItem.name" :subtitle="listItem.email">
<vs-avatar slot="avatar" :text="listItem.name" />
</vs-list-item>
</draggable>
</vs-list>
<vs-list class="mt-5">
<vs-list-header title="People Group 2" color="primary"></vs-list-header>
<draggable :list="list2" group="people" class="p-2 cursor-move">
<vs-list-item v-for="(listItem, index) in list2" :key="index" :title="listItem.name" :subtitle="listItem.email">
<vs-avatar slot="avatar" :text="listItem.name" />
</vs-list-item>
</draggable>
</vs-list>
</template>
<script>
import draggable from 'vuedraggable'
export default {
data() {
return {
list1: [
{
name: "Paz Joya",
email: "girliness@spotlike.co.uk",
},
{
name: "Sunshine Cose",
email: "executrixship@equisized.edu",
},
{
name: "Alba Dobbin",
email: "bidding@demibob.or",
},
{
name: "Marlin Hinchee",
email: "preholding@scuffly.co.uk",
}
],
list2: [
{
name: "Leia Atienza",
email: "unmeasurableness@interlamellar.co.uk"
},
{
name: "Lashawna Vaudrainm",
email: "soaking@khubber.com"
},
{
name: "Liliana Henscheid",
email: "lecideine@turndown.org"
},
{
name: "Keven Kolter",
email: "nontenure@anglicanum.co.uk"
}
]
}
},
components: {
draggable,
}
}
</script>