136 lines
3.7 KiB
Vue
136 lines
3.7 KiB
Vue
<script setup>
|
|
// ListGroup components removed - using custom implementation
|
|
import { computed, onMounted, ref, useTemplateRef, watch } from 'vue';
|
|
import draggable from 'vuedraggable';
|
|
|
|
|
|
const props = defineProps({
|
|
list1: Array,
|
|
list2: Array
|
|
});
|
|
|
|
const item1 = {
|
|
id: 1,
|
|
name: 'Item 1'
|
|
}
|
|
|
|
const item2 = {
|
|
id: 2,
|
|
name: 'Item 2'
|
|
}
|
|
|
|
const item3 = {
|
|
id: 3,
|
|
name: 'Item 3'
|
|
}
|
|
|
|
const isDragging = ref(false);
|
|
|
|
let containerOne = ref([item1, item2])
|
|
let containerTwo = ref([item3])
|
|
|
|
const dragOptions = computed(() => {
|
|
return {
|
|
animation: 200,
|
|
group: "actions",
|
|
disabled: false,
|
|
ghostClass: "ghost"
|
|
}
|
|
});
|
|
|
|
const removeAt = (idx, targeContainer) => {
|
|
targeContainer.splice(idx, 1);
|
|
};
|
|
|
|
watch(
|
|
() => containerOne.value,
|
|
(value) => {
|
|
console.log(value)
|
|
},
|
|
{ deep: true }
|
|
);
|
|
|
|
</script>
|
|
<template>
|
|
<div class="grid grid-cols-4 gap-4">
|
|
<draggable
|
|
class="list-group"
|
|
:list="containerOne"
|
|
item-key="id"
|
|
:component-data="{
|
|
tag: 'ul',
|
|
type: 'transition-group',
|
|
name: !isDragging ? 'flip-list' : null
|
|
}"
|
|
v-bind="dragOptions"
|
|
@start="isDragging = true"
|
|
@end="isDragging = false"
|
|
group="actions"
|
|
>
|
|
<template #item="{element, index}">
|
|
<li class="flex justify-between items-center p-2 bg-white border border-gray-200 rounded-md mb-1 hover:bg-gray-50 transition-colors">
|
|
<span class="text">{{ element.name }} </span>
|
|
|
|
<button type="button" class="cursor-pointer p-1 hover:bg-gray-100 rounded" @click="removeAt(index, containerOne)"><svg class="w-6 h-6 text-gray-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
|
|
</svg></button>
|
|
</li>
|
|
</template>
|
|
</draggable>
|
|
<draggable
|
|
class="list-group"
|
|
:list="containerTwo"
|
|
:component-data="{
|
|
tag: 'ul',
|
|
type: 'transition-group',
|
|
name: !isDragging ? 'flip-list' : null
|
|
}"
|
|
item-key="id"
|
|
v-bind="dragOptions"
|
|
@start="isDragging = true"
|
|
@end="isDragging = false"
|
|
group="actions"
|
|
>
|
|
<template #item="{element, index}">
|
|
<li class="flex justify-between items-center p-2 bg-white border border-gray-200 rounded-md mb-1 hover:bg-gray-50 transition-colors">
|
|
<span class="text">{{ element.name }} </span>
|
|
|
|
<button type="button" class="cursor-pointer p-1 hover:bg-gray-100 rounded" @click="removeAt(index, containerOne)"><svg class="w-6 h-6 text-gray-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
|
|
</svg></button>
|
|
</li>
|
|
</template>
|
|
</draggable>
|
|
</div>
|
|
</template>
|
|
<style lang="css">
|
|
.button {
|
|
margin-top: 35px;
|
|
}
|
|
|
|
.flip-list-move {
|
|
transition: transform 0.5s;
|
|
}
|
|
|
|
.no-move {
|
|
transition: transform 0s;
|
|
}
|
|
|
|
.ghost {
|
|
opacity: 0.5;
|
|
background: #c8ebfb;
|
|
}
|
|
|
|
.list-group {
|
|
min-height: 20px;
|
|
}
|
|
|
|
.list-group-item {
|
|
cursor: move;
|
|
}
|
|
|
|
.list-group-item i {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|