vue3使用vuedraggable和grid实现自定义拖拽布局方式

将军大人

使用vuedraggable和grid实现自定义拖拽布局


实现思路

使用vuedraggable实现拖拽功能，拖拽改变的是模块在list的顺序，使用gird设置动态类名，根据模块在list的位置匹配对应的gird样式。

效果图

每个模块可以拖拽，不同数量和不同位置模块宽度和高度不同（注意：模块样式width:100%,height:100%）

图1-标准布局

图2-三块布局

图3-自定义布局

1. <template>
   
2.   <div class="wrap">
   
3.     <div class="flex-row-start defineLayout">
   
4.       <div class="flex-row" @click="changeLayout(LayoutType.FOUR)">
   
5.         <div class="name">标准布局</div>
   
6.       </div>
   
7.       <div class="flex-row" @click="changeLayout(LayoutType.THREE)">
   
8.         <div class="name">三块布局</div>
   
9.       </div>
   
10.       <el-dropdown ref="dropdown1" trigger="contextmenu" style="margin-right: 30px">
    
11.         <div class="flex-row el-dropdown-link" @click="() => {
    
12.           if (dropdown1) dropdown1.handleOpen();
    
13.         }">
    
14.           <div class="name">自定义布局</div>
    
15.         </div>
    
16.         <template #dropdown>
    
17.           <el-checkbox-group class="flex-col-start" v-model="checkedIdList" :max="4" style="padding: 10px 0 10px 30px;">
    
18.             <el-checkbox @change="changeLayout(LayoutType.DEFINE)" v-for="(item, index) of cList" :key="index"
    
19.               :label='item.id'>{{
    
20.                 item.name }}</el-checkbox>
    
21.           </el-checkbox-group>
    
22.         </template>
    
23.       </el-dropdown>
    
24.     </div>
    
25.     <div class="draggable-border">
    
26.       <draggable :list="moduleList" item-key="id" :options="{ animation: 200, ghostClass: 'ghost' }" :class="{
    
27.         gird1col: moduleList.length == 1,
    
28.         gird2col: moduleList.length == 2,
    
29.         gird3col: moduleList.length == 3,
    
30.         gird4col: moduleList.length == 4
    
31.       }">
    
32.         <template #item="{ element, index }">
    
33.           <component :ref="element.ref" :is="element.component" :name="element.name" :class="{
    
34.             [`dragItem${index}`]: true,
    
35.           }">
    
36.           </component>
    
37.         </template>
    
38.       </draggable>
    
39.     </div>
    
40.   </div>
    
41. </template>

复制代码

1. <script lang="ts" setup>
   
2. import { ref, onMounted } from "vue";
   
3. import { useState, useMutations } from "@/utils/useStore";
   
4. import Block1 from '@/components/block1/block1';
   
5. import Block2 from '@/components/block2/block2';
   
6. import Block3 from '@/components/block3/block3';
   
7. import Block4 from '@/components/block4/block4';
   
8. import Block5 from '@/components/block5/block5.vue';
   
9. 
   
10. //@ts-ignore
    
11. import draggable from "vuedraggable";
    
12. import { LayoutType } from '@/utils/enum';
    
13. 
    
14. //资源对象
    
15. let resource = ref<any>();
    
16. //@ts-ignore
    
17. const { moduleList } = useState(["moduleList"], "drag");
    
18. //@ts-ignore
    
19. const { setModuleList } = useMutations(["setModuleList"], "drag");
    
20. 
    
21. let dropdown1 = ref();
    
22. let checkedIdList = ref<number[]>([]);//自定义选择的模块
    
23. 
    
24. let cList: any[] = [
    
25.   {
    
26.     type: '1',
    
27.     id: 1,
    
28.     name: '块1',
    
29.     component: Block1
    
30.   }, {
    
31.     type: '1',
    
32.     id: 2,
    
33.     name: '块2',
    
34.     component: Block2
    
35.   }, {
    
36.     type: '2',
    
37.     id: 3,
    
38.     name: '块3',
    
39.     component: Block3
    
40.   }, {
    
41.     type: '2',
    
42.     id: 4,
    
43.     name: '块4',
    
44.     component: Block4
    
45.   }, {
    
46.     type: '2',
    
47.     id: 5,
    
48.     name: '块5',
    
49.     component: Block5
    
50.   },
    
51. ];
    
52. 
    
53. onMounted(() => {
    
54.   setCompontent([1, 2, 3, 4]);
    
55. })
    
56. 
    
57. // 自定义当前页包含组件
    
58. const setCompontent = (idList: number[]) => {
    
59.   checkedIdList.value = idList;
    
60.   let list = cList.filter((f: any) => {
    
61.     return idList.indexOf(f.id) != -1;
    
62.   });
    
63.   setModuleList(list);
    
64.   console.log("list", list);
    
65. };
    
66. 
    
67. // 切换布局
    
68. const changeLayout = (type) => {
    
69.   switch (type) {
    
70.     case LayoutType.THREE:
    
71.       setCompontent([1, 2, 5]);
    
72.       break;
    
73.     case LayoutType.DEFINE:
    
74.       if (checkedIdList.value) setCompontent(checkedIdList.value);
    
75.       break;
    
76.     default:
    
77.       // 默认四宫格
    
78.       setCompontent([1, 2, 3, 4]);
    
79.       break;
    
80.   }
    
81. }
    
82. </script>

复制代码

1. <style scoped lang="scss">
   
2. .wrap {
   
3.   height: 100vh;
   
4.   width: 100vw;
   
5.   position: relative;
   
6.   display: block;
   
7.   overflow: hidden;
   
8. 
   
9.   .defineLayout {
   
10.     color: #fff;
    
11.     height: 41px;
    
12.     width: 100%;
    
13.     background-color: #000;
    
14.     align-items: center;
    
15.     padding: 0 20px;
    
16. 
    
17.     .name {
    
18.       font-size: 12px;
    
19.       font-weight: 500;
    
20.       color: #FFFFFF;
    
21.       line-height: 17px;
    
22.       margin-left: 5px;
    
23.       margin-right: 20px;
    
24.       cursor: pointer;
    
25.     }
    
26.   }
    
27. 
    
28.   .draggable-border {
    
29.     background-color: #fff;
    
30.     width: 100%;
    
31.     height: calc(100vh - 41px);
    
32.   }
    
33. }
    
34. 
    
35. // 设置拖拽组件的样式
    
36. .draggable-border>div {
    
37.   width: 100%;
    
38.   height: 100%;
    
39.   display: grid;
    
40.   grid:
    
41.     'one two'
    
42.     'three four';
    
43.   grid-template-columns: 50% 50%;
    
44.   grid-template-rows: 50% 50%;
    
45. }
    
46. 
    
47. .gird4col {
    
48.   grid:
    
49.     'one two'
    
50.     'three four' !important;
    
51.   grid-template-columns: 50% 50% !important;
    
52.   grid-template-rows: 50% 50% !important;
    
53. }
    
54. 
    
55. .gird3col {
    
56.   grid:
    
57.     'one three'
    
58.     'two three' !important;
    
59.   grid-template-columns: 50% 50% !important;
    
60.   grid-template-rows: 50% 50% !important;
    
61. }
    
62. 
    
63. .gird2col {
    
64.   grid:
    
65.     'one two'
    
66.     'one two' !important;
    
67.   grid-template-columns: 50% 50% !important;
    
68.   grid-template-rows: 50% 50% !important;
    
69. }
    
70. 
    
71. .gird1col {
    
72.   grid:
    
73.     'one' !important;
    
74.   grid-template-columns: 100% !important;
    
75.   grid-template-rows: 100% !important;
    
76. }
    
77. 
    
78. .fullscreen {
    
79.   width: 100vw;
    
80.   height: 100vh;
    
81.   position: fixed;
    
82.   top: 0;
    
83.   left: 0;
    
84.   z-index: 999;
    
85. }
    
86. 
    
87. .dragItem0 {
    
88.   grid-area: one;
    
89. }
    
90. 
    
91. .dragItem1 {
    
92.   grid-area: two;
    
93. }
    
94. 
    
95. .dragItem2 {
    
96.   grid-area: three;
    
97. }
    
98. 
    
99. .dragItem3 {
    
100.   grid-area: four;
     
101. }
     
102. </style>

复制代码

总结

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

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