vue3 vue-draggable-next如何实现拖拽穿梭框效果

红木松

vue3 vue-draggable-next 拖拽穿梭框效果

1. <template>  
   
2.   <div>  
   
3.     <h2>列表 1</h2>  
   
4.     <draggable v-model="list1" group="items" tag="transition-group" @end="onDragEnd">  
   
5.       <div v-for="(item, index) in list1" :key="item.id" class="list-item">  
   
6.         {{ item.name }}  
   
7.       </div>  
   
8.     </draggable>  
   
9.   
   
10.     <h2>列表 2</h2>  
    
11.     <draggable v-model="list2" group="items" tag="transition-group" @end="onDragEnd">  
    
12.       <div v-for="(item, index) in list2" :key="item.id" class="list-item">  
    
13.         {{ item.name }}  
    
14.       </div>  
    
15.     </draggable>  
    
16.   </div>  
    
17. </template>   

复制代码

1. <script>  
   
2. import draggable from 'vue-draggable-next';  
   
3.   
   
4. export default {  
   
5.   components: {  
   
6.     draggable  
   
7.   },  
   
8.   data() {  
   
9.     return {  
   
10.       list1: [  
    
11.         { id: 1, name: 'Item 1' },  
    
12.         { id: 2, name: 'Item 2' }  
    
13.         // ...  
    
14.       ],  
    
15.       list2: [  
    
16.         { id: 3, name: 'Item 3' },  
    
17.         { id: 4, name: 'Item 4' }  
    
18.         // ...  
    
19.       ]  
    
20.     };  
    
21.   },  
    
22.   methods: {  
    
23.     onDragEnd(evt) {  
    
24.       // 这里可以添加拖动结束后的逻辑，但通常不需要，因为数据会自动更新  
    
25.       console.log('Dragging ended:', evt);  
    
26.     }  
    
27.   }  
    
28. };  
    
29. </script>

复制代码

1. <style scoped>  
   
2. .list-item {  
   
3.   /* 添加一些样式以便区分 */  
   
4.   margin: 10px 0;  
   
5.   padding: 10px;  
   
6.   border: 1px solid #ddd;  
   
7.   border-radius: 5px;  
   
8.   /* 过渡效果（如果需要） */  
   
9.   transition: transform 0.3s ease;  
   
10. }  
    
11. </style>

复制代码

vue3 vue.draggable.next 拖拽插件


简单介绍

• vue.draggable.next 是一款vue3的拖拽插件,是vue.draggable升级版本，同样是基于Sortable.js实现的，你可以用它来拖拽列表、菜单、工作台、选项卡等常见的工作场景。
  
• 官网
  

安装

1. npm i -S vuedraggable@next

复制代码

导入组件

1. import draggable from 'vuedraggable'

复制代码

属性说明

属性名称说明group如果一个页面有多个拖拽区域，通过设置group名称可以实现多个区域之间相互拖拽或者 { name: “…”, pull: [true, false, ‘clone’, array , function], put: [true, false, array , function] }sort是否开启排序,如果设置为false,它所在组无法排序delay鼠标按下多少秒之后可以拖拽元素touchStartThreshold鼠标按下移动多少px才能拖动元素disabled:disabled= “true”,是否启用拖拽组件animation拖动时的动画效果，如设置animation=1000表示1秒过渡动画效果handle:handle=“.mover” 只有当鼠标在class为mover类的元素上才能触发拖到事件filter:filter=“.unmover” 设置了unmover样式的元素不允许拖动draggable:draggable=“.item” 样式类为item的元素才能被拖动ghost-class:ghost-class=“ghostClass” 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成truechosen-class:ghost-class=“hostClass” 被选中目标的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成truedrag-class:drag-class="dragClass"拖动元素的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成trueforce-fallback默认false，忽略HTML5的拖拽行为，因为h5里有个属性也是可以拖动，你要自定义ghostClass chosenClass dragClass样式时，建议forceFallback设置为truefallback-class默认false，克隆选中元素的样式到跟随鼠标的样式fallback-on-body默认false，克隆的元素添加到文档的body中fallback-tolerance按下鼠标移动多少个像素才能拖动元素，:fallback-tolerance=“8”scroll默认true,有滚动区域是否允许拖拽scroll-fn滚动回调函数scroll-fensitivity距离滚动区域多远时，滚动滚动条scroll-speed滚动速度
简单例子（只能在一组里拖拽切换排序）

1. <template>
   
2.       <div class="marc-content">
   
3.          <table class="table">
   
4.             <draggable sort="true" :list="MarcList"
   
5.                :force-fallback="true" @start="startHandle" @end="endHandle">
   
6.                <template #item="{ element }">
   
7.                   <tr>
   
8.                      <th>{{ element.Marc_title }}</th>
   
9.                      <td><input type="text" v-model="element.Marc_number"></td>
   
10.                      <td><input type="text" v-model="element.Marc_count"></td>
    
11.                      <td><input type="text" v-model="element.Marc_content"></td>
    
12.                   </tr>
    
13.                </template>
    
14.             </draggable>
    
15.          </table>
    
16.       </div>
    
17. </template>

复制代码

1. <script setup lang='ts'>
   
2. import { ref, reactive } from 'vue'
   
3. import draggable from "vuedraggable";
   
4. 
   
5. // 定义 Marc 数据列表
   
6. const MarcList = reactive([
   
7.    {
   
8.       Marc_title: '字段名称1',
   
9.       Marc_number: '001',
   
10.       Marc_count: '1 1',
    
11.       Marc_content: '字段内容1',
    
12.    },
    
13.    {
    
14.       Marc_title: '字段名称2',
    
15.       Marc_number: '002',
    
16.       Marc_count: '1 2',
    
17.       Marc_content: '字段内容2',
    
18.    },
    
19.    {
    
20.       Marc_title: '字段名称3',
    
21.       Marc_number: '003',
    
22.       Marc_count: '0 3',
    
23.       Marc_content: '字段内容3',
    
24.    },
    
25.    {
    
26.       Marc_title: '字段名称4',
    
27.       Marc_number: '004',
    
28.       Marc_count: '1 4',
    
29.       Marc_content: '字段内容4',
    
30.    },
    
31.    {
    
32.       Marc_title: '字段名称5',
    
33.       Marc_number: '005',
    
34.       Marc_count: '0 5',
    
35.       Marc_content: '字段内容5',
    
36.    }
    
37. ])
    
38. 
    
39. // 开始拖拽
    
40. const startHandle = (e: any) => {
    
41.    console.log(e);
    
42. }
    
43. // 结束拖拽
    
44. const endHandle = (e: any) => {
    
45.    console.log(e);
    
46. }
    
47. </script>

复制代码

1. <style scoped lang="less">
   
2. .marc-content {
   
3.    margin: 15px 0;
   
4. 
   
5.    .table,
   
6.    .table tr td,
   
7.    th {
   
8.       height: 35px;
   
9.       min-height: 35px;
   
10.       border-collapse: collapse;
    
11.       border: 1px solid #fff;
    
12.       padding: 0 10px;
    
13.       font-size: 16px;
    
14.       color: #333;
    
15.       box-sizing: border-box;
    
16.    }
    
17. 
    
18.    .table {
    
19.       tr {
    
20.          th {
    
21.             background: #A9C8C6;
    
22.             border-right: 2px solid rgb(127, 164, 156);
    
23.             cursor: pointer;
    
24.          }
    
25.       }
    
26.    }
    
27. 
    
28.    .table {
    
29.       tr {
    
30.          &:hover {
    
31.             background: rgba(127, 164, 156, 0.3);
    
32. 
    
33.             th {
    
34.                background: inherit;
    
35.                border-right: 2px solid #ff0000;
    
36.             }
    
37.          }
    
38.       }
    
39.    }
    
40. }
    
41. </style>

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/322352ryf.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！