本文主要是介绍vue3 vue-draggable-next 实现拖拽穿梭框效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、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>
这篇关于vue3 vue-draggable-next 实现拖拽穿梭框效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
