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>