vue.draggable 拖拽

文档：
vue.draggable中文文档 - itxst.com

 

参考：
Vue.jsvuedraggable插件安装与使用教程-CSDN博客 
vue使用vuedraggable实现嵌套多层拖拽排序功能_vue.js_脚本之家 
https://zhuanlan.zhihu.com/p/611811323 

安装vuedraggable插件

1. npm i vuedraggable

复制代码

 

1. <template>
2.   <div class="left-allocate">
3.     <!-- 拖拽部分开始 -->
4.     <div class="drag-distribute-cls">
5.       <div class="waitloadcar-list">
6.         <draggable
7.           v-show="waitLoadList.length > 0"
8.           v-model="waitLoadList"
9.           forceFallback="true"
10.           group="vehicle-station"
11.           animation="0"
12.           :sort="false"
13.           touchStartThreshold="0px"
14.           dragClass="dragClass"
15.           ghostClass="ghostClass"
16.           chosenClass="chosenClass"   
17.           @start="onStart"
18.           @end="onEnd">
19.           <transition-group>
20.             <div v-for="(vehicle, index) in waitLoadList" :key="index" :class="['vehicle-cls', vehicle.type === 'pallet' ? 'pallet-cls' : 'shelves-cls']">
21.               <van-image
22.                 v-if="vehicle.type === 'shelves'"
23.                 width="48"
24.                 height="48"
25.                  :src="require('../src/assets/logo.png')"
26.               />
27.               <van-image
28.                 v-if="vehicle.type === 'pallet'"
29.                 width="68"
30.                 height="48"
31.                 :src="require('../src/assets/logo.png')"
32.               />
33.               <van-image
34.                 v-if="vehicle.type === 'cage'"
35.                 width="64"
36.                 height="64"
37.                   :src="require('../src/assets/logo.png')"
38.               />
39.               <span class="vehicle-name">{
40.   
41.   { vehicle.name }}</span>
42.             </div>
43.           </transition-group>
44.         </draggable>
45.         <div v-show="waitLoadList.length === 0" class="vehicle-cls shelves-cls">无未分配载具</div>
46.       </div>
48.       <h4 class="header">放置位置列表</h4>
49.       <div class="workposition-list">
50.         <draggable
51.           v-show="workpositionList.length"
52.           v-model="workpositionList"
53.           group="vehicle-station"
54.           :disabled="false"
55.           :sort="false"
56.           handle=".mover-butuodong">
57.           <transition-group>
58.             <div v-for="(workpos, index) in workpositionList"
59.               :key="index"
60.               class="workpos-cls"
61.               @mousemove="workposMove"
62.               :data-actindex="index"
63.               :style="{ marginRight: index % 2 ? '16px': '0px'}">
64.                 <h5 :style="{ marginTop: index % 2 !== 0 ? '48px' : '16px' }">{
65.   
66.   { index % 2 === 0 ? '放置位置' + workpos.station : ''}}</h5>
67.                 <!-- 托盘 -->
68.                 <div class="pallet-icon" v-if="workpos.type === 'pallet'">
69.                   <van-image
70.                     width="68"
71.                     height="48"
72.                     :src="require('../src/assets/logo.png')"
73.                   />
74.                   <span class="sel-text">{
75.   
76.   { workpos.name }}</span>
77.                 </div>
78.                 <!-- 移动货架 -->
79.                 <div class="shelves-icon" v-if="workpos.type === 'shelves'">
80.                   <div class="left-shelves">
81.                     <van-image
82.                       width="48"
83.                       height="48"
84.   :src="require('../src/assets/logo.png')"
85.                     />
86.                     <span class="sel-text">{
87.   
88.   { workpos.name }}</span>
89.                   </div>
90.                 </div>
91.                 <!-- 笼车 -->
92.                 <div class="shelves-icon" v-if="workpos.type === 'cage'">
93.                   <div class="left-shelves">
94.                     <van-image
95.                       width="48"
96.                       height="48"
97.                       :src="require('../src/assets/logo.png')"
98.                     />
99.                     <span class="sel-text">{
100.   
101.   { workpos.name }}</span>
102.                   </div>
103.                 </div>
104.                 <!-- 放置位置空 -->
105.                 <div class="shelves-icon" v-if="workpos.type === 'kong'">
106.                   <div class="left-kong">空</div>
107.                 </div>
108.             </div>
109.           </transition-group>
110.         </draggable>
111.         <div v-show="workpositionList.length === 0" class="workpos-kong">
112.           无可分配放置位置
113.         </div>
114.       </div>
115.     </div>
116.   </div>
117. </template>
118. <script>
119. import draggable from 'vuedraggable'
121. export default {
122.   name: 'DraggerName',
123.   components: {
124.     draggable
125.   },
126.   data () {
127.     return {
128.       waitLoadList: [
129.         // { type: 'shelves', name: '测试11', station: '', vehicleId: '1', amount: 4000.00 },
130.         { type: 'pallet', name: '测试两个15', station: '', vehicleId: '5', amount: 4000.00 },
131.         { type: 'shelves', name: '测试16', station: '', vehicleId: '6', amount: 4000.00 },
132.         { type: 'shelves', name: '测试17', station: '', vehicleId: '7', amount: 4000.00 },
133.         { type: 'pallet', name: '测试两个18', station: '', vehicleId: '8', amount: 4000.00 }
134.       ],
135.       // 数据的一些约定：托盘（type: 'pallet'）放在放置位置的第一个；type: 'fu' 不显示
136.       workpositionList: [
137.         { type: 'kong', name: '', station: '1', storageId: '1' },
138.         { type: 'kong', name: '', station: '1', storageId: '2' },
139.         { type: 'kong', name: '', station: '2', storageId: '3' },
140.         { type: 'kong', name: '', station: '2', storageId: '4' },
141.         { type: 'kong', name: '', station: '3', storageId: '5' },
142.         { type: 'kong', name: '', station: '3', storageId: '6' }
143.       ],
144.       waitDragStart: [],
145.       waitVehicleing: {}, // 正在拖动的
146.       workDragStart: []
147.     }
148.   },
149.   mounted () {
150.     // 重置hover
151.     document.body.style.setProperty('--bg-color', 'transparent')
152.     document.body.style.setProperty('--border-value', '1px dotted #CACDD6')
153.   },
154.   methods: {
155.     // 动态获取放置编号
156.     workposMove (e) {
157.       this.workposNo = e.currentTarget.dataset.actindex
158.     },
159.     // 开始拖拽事件
160.     onStart (e) {
161.       const { oldIndex } = e
162.       this.waitVehicleing = this.waitLoadList[oldIndex]
163.       // this.waitDragStart = deepClone(this.waitLoadList)
164.       // this.workDragStart = deepClone(this.workpositionList)
165.       // 添加hover
166.       document.body.style.setProperty('--bg-color', 'rgba(241, 151, 44, 0.10)')
167.       document.body.style.setProperty('--border-value', '1px solid #F1972C')
168.     },
169.     // 拖拽结束事件
170.     onEnd (e) {
171.       // 重置hover
172.       document.body.style.setProperty('--bg-color', 'transparent')
173.       document.body.style.setProperty('--border-value', '1px dotted #CACDD6')
174.       // hover样式的序号
175.       const hoverIndex = Number(this.workposNo)
176.       // 开始分配
177.       const { newIndex, oldIndex } = e
179.       // 列表没有变化
180.       if ((newIndex === oldIndex) && (this.waitDragStart.length === this.waitLoadList.length)) {
181.         return false
182.       }
184.       this.workpositionList.splice(newIndex, 1)
185.       const { type: waitType } = this.waitVehicleing
186.       const { type: workType, name: workName, station: workStation, storageId: workStorageId } = this.workpositionList[hoverIndex]
188.       if (workName) {
189.         this.waitLoadList.push({ type: workType, name: workName, station: '' })
190.       }
191.       if (['shelves', 'cage'].includes(waitType)) {
192.         this.workpositionList[hoverIndex] = {
193.           ...this.waitVehicleing,
194.           station: workStation,
195.           storageId: workStorageId
196.         }
197.       } else if (waitType === 'pallet') {
198.         this.workpositionList[hoverIndex] = {
199.           ...this.waitVehicleing,
200.           station: workStation,
201.           storageId: workStorageId
202.         }
203.         // 托盘占两个格子
204.         if (hoverIndex % 2) {
205.           // 第奇数个
206.           const { type: sworkType, name: sworkName, station: sworkStation, storageId: sworkStorageId } = this.workpositionList[hoverIndex - 1]
207.           if (sworkName) {
208.             this.waitLoadList.push({ type: sworkType, name: sworkName, station: '' })
209.           }
210.           this.workpositionList.splice(hoverIndex + 1, 0, { type: 'fu', name: '', station: sworkStation, storageId: sworkStorageId })
211.           this.workpositionList.splice(hoverIndex - 1, 1)
212.         } else {
213.           // 第偶数个
214.           const { type: sworkType, name: sworkName, station: sworkStation, storageId: sworkStorageId } = this.workpositionList[hoverIndex + 1]
215.           if (sworkName) {
216.             this.waitLoadList.push({ type: sworkType, name: sworkName, station: '' })
217.           }
218.           this.workpositionList[hoverIndex + 1] = { type: 'fu', name: '', station: sworkStation, storageId: sworkStorageId }
219.         }
220.       }
221.     }
222.   }
223. }
224. </script>
225. <style lang="scss" scoped>
226. .left-allocate {
227.   .drag-distribute-cls {
228.     .waitloadcar-list {
229.       width: 100%;
230.       min-height: 134px;
231.       div span {
232.         display: flex;
233.         flex-direction: row;
234.         flex-wrap: wrap;
235.       }
236.       .vehicle-cls {
237.         height: 102px;
238.         background: #FFFFFF;
239.         box-shadow: 0 1px 6px 0 rgba(0,0,0,0.08);
240.         border-radius: 8px;
241.         margin: 16px;
242.         display: flex;
243.         flex-direction: column;
244.         align-items: center;
245.         justify-content: space-around;
246.       }
247.       .shelves-cls {
248.         width: 126px;
249.       }
250.       .pallet-cls {
251.         width: 262px;
252.       }
253.       .vehicle-name {
254.         font-family: PingFangSC-Regular;
255.         font-size: 14px;
256.         color: rgba(0,0,0,0.70);
257.         letter-spacing: 0;
258.         text-align: center;
259.         font-weight: 400;
260.       }
261.     }
262.     .workposition-list {
263.       .workpos-kong {
264.         width: 126px;
265.         height: 102px;
266.         background: #ffffff;
267.         box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.08);
268.         border-radius: 8px;
269.         margin: 16px;
270.         display: flex;
271.         flex-direction: column;
272.         align-items: center;
273.         justify-content: space-around;
274.       }
275.       div span {
276.         display: flex;
277.         flex-wrap: wrap;
278.         margin-left: 16px;
279.       }
280.       .workpos-cls {
281.         .sel-text {
282.           display: inline;
283.           margin-left: 0px;
284.         }
285.         h5 {
286.           font-family: PingFangSC-Regular;
287.           font-size: 16px;
288.           color: rgba(0,0,0,0.70);
289.           letter-spacing: 0;
290.           font-weight: 400;
291.           margin: 16px 0 12px;
292.         }
293.         .pallet-icon {
294.           width: 262px;
295.           height: 102px;
296.           background: #DBF3F0;
297.           box-shadow: 0 1px 6px 0 rgba(0,0,0,0.08);
298.           border-radius: 8px;
299.           display: flex;
300.           flex-direction: column;
301.           justify-content: space-around;
302.           align-items: center;
303.         }
304.         .shelves-icon {
305.           display: flex;
306.           flex-direction: row;
307.           align-items: center;
308.           justify-content: space-between;
309.           .left-kong {
310.             width: 126px;
311.             height: 102px;
312.             line-height: 102px;
313.             background: #F5F6F9;
314.             border: 1px dotted #CACDD6;
315.             border-radius: 8px;
316.             text-align: center;
317.             font-family: PingFangSC-Medium;
318.             font-size: 18px;
319.             color: rgba(0,0,0,0.40);
320.             letter-spacing: 0;
321.             font-weight: 500;
322.             margin: 0 4px;
323.             &:hover {
324.               background-color: var(--bg-color);
325.               border: var(--border-value);
326.             }
327.           }
328.           .left-shelves {
329.             width: 126px;
330.             height: 102px;
331.             background: #DBF3F0;
332.             box-shadow: 0 1px 6px 0 rgba(0,0,0,0.08);
333.             border-radius: 8px;
334.             display: flex;
335.             flex-direction: column;
336.             justify-content: space-around;
337.             align-items: center;
338.             margin: 0 4px;
339.           }
340.         }
341.       }
342.     }
343.     .dragClass {
344.       border: 1px solid #01AE97;
345.       border-radius: 8px;
346.     }
347.     .ghostClass {
348.       display: none;
349.     }
350.   }
351. }
352. </style>

复制代码

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。