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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59