<template>
	<div class="row">
		<div class="col-6">
			<VueDraggable
				class="list-group"
				v-model="list1"
				animation="150"
				ghostClass="ghost"
				group="people"
			>
				<div
					v-for="item in list1"
					:key="item.no-id"
					class="list-group-item"
				>
					{{ item.name }}
				</div>
			</VueDraggable>
		</div>
		<div class="col-6">
			<VueDraggable
				class="list-group"
				v-model="list2"
				animation="150"
				group="people"
				ghostClass="ghost"
			>
				<div
					v-for="item in list2"
					:key="item.no-id"
					class="list-group-item"
				>
					{{ item.name }}
				</div>
			</VueDraggable>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
const list1 = ref([
	{
		"name": "test",
		"no-id": "employees.id"
	},
	{
		"name": "active",
		"no-id": "employees.active"
	},
	{
		"name": "firstname",
		"no-id": "employees.firstname"
	},
	{
		"name": "lastname",
		"no-id": "employees.lastname"
	}
])
const list2 = ref([
	{
		"name": "short",
		"no-id": "employees.short"
	},
	{
		"name": "birthday",
		"no-id": "employees.birthday"
	},
	{
		"name": "number",
		"no-id": "employees.number"
	},
	{
		"name": "fullname",
		"no-id": "employees.fullname"
	}
])
</script>