一、vue3 vue-draggable-next 实现拖拽穿梭框效果
<template>
<div>
<h2>列表 1</h2>
<draggable v-model="list1" group="items" tag="transition-group" @end="onDragEnd">
<div v-for="(item, index) in list1" :key="item.id" class="list-item">
{{ item.name }}
</div>
</draggable>
<h2>列表 2</h2>
<draggable v-model="list2" group="items" tag="transition-group" @end="onDragEnd">
<div v-for="(item, index) in list2" :key="item.id" class="list-item">
{{ item.name }}
</div>
</draggable>
</div>
</template>
<script>
import draggable from 'vue-draggable-next';
export default {
components: {
draggable
},
data() {
return {
list1: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
],
list2: [
{ id: 3, name: 'Item 3' },
{ id: 4, name: 'Item 4' }
]
};
},
methods: {
onDragEnd(evt) {
console.log('Dragging ended:', evt);
}
}
};
</script>
<style scoped>
.list-item {
margin: 10px 0;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
transition: transform 0.3s ease;
}
</style>