uni-app，app实现拖拽排序功能。

川长思鸟来 2022-12-13 14:08 613阅读 0赞

先上图，项目需求需要拖拽排序。  
  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk4MDIzNw_size_16_color_FFFFFF_t_70_pic_center]  
因为之前有做过h5的拖拽排序，所以干脆就直接引用了之前的做法，使用sortablejs这个插件来做,同时结合renderjs。

<template>
    	<view class="s_page">
    		<view class="card">
    			<view class="cell">
    				<text class="f28_999 flex-1">已显示内容</text>
    				<text class="f28_999">拖动</text>
    			</view>
    			<view id="sort" >
    				<view class="cell">
    					<image class="icon" src="/static/image/order/delte.png" mode=""></image>
    					<text class="f32_302 flex-1">待接收工单</text>
    					<image class="sort" src="/static/image/matser/index/sort.png" mode=""></image>
    				</view>
    				<view class="cell">
    					<image class="icon" src="/static/image/order/delte.png" mode=""></image>
    					<text class="f32_302 flex-1">待处理工单</text>
    					<image class="sort" src="/static/image/matser/index/sort.png" mode=""></image>
    				</view>
    				<view class="cell">
    					<image class="icon" src="/static/image/order/delte.png" mode=""></image>
    					<text class="f32_302 flex-1">今日已完成</text>
    					<image class="sort" src="/static/image/matser/index/sort.png" mode=""></image>
    				</view>
    			</view>
    		</view>
    	</view>
    </template>
    
    
    
    <script module='sortable' lang="renderjs"  >
    	export default { 
    		data() { 
    			return { 
    				mySortable:null
    			};
    		},
    		mounted(){ 
    			if (typeof window.Sortable === 'object') { 
    				this.init()
    			} else { 
    				// 动态引入类库
    				const script = document.createElement('script')
    				script.src = './static/sortable.js'
    				script.onload = this.init
    				document.head.appendChild(script)
    			}
    		},
    		methods:{ 
    			init() { 
    				mySortable = new Sortable(document.getElementById('sort'),{ 
    					direction: 'horizontal',
    					scroll: false,
    					handle:'.sort',
    					ghostClass:'drag',
    					dragClass:'chosenClass'
    				})
    			},
    		}
    	}
    </script>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				
    			};
    		},
    		mounted(){ 
    			
    		},
    	}
    </script>
    <style>
    	.drag{ 
    		background-color: #FFFFFF !important;
    		opacity: 0 !important;
    	}
    	.chosenClass{ 
    		background-color: #FFFFFF !important;
    		opacity: 1 !important;
    	}
    </style>
    
    <style scoped lang="scss">
    .s_page{ 
    	padding: 20rpx 0;
    	.card{ 
    		background-color: #FFFFFF;
    		
    		.cell{ 
    			@include flex_ac;
    			height: 112rpx;
    			border-bottom: 2rpx solid #E5E5E5;
    			padding: 0 30rpx;
    			background-color: #FFFFFF;
    			&:last-child{ 
    				border: none;
    			}
    			.icon{ 
    				width: 32rpx;
    				height: 32rpx;
    				margin-right: 20rpx;
    			}
    			.sort{ 
    				height: 44rpx;
    				width: 44rpx;
    			}
    		}
    	}
    }
    </style>

效果实现了，具体样式还需要自行去调整，顺便附上sortablejs的GitHub地址。[链接][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk4MDIzNw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/4df2216a7125478cb26d989e7374ac39.png
[Link 1]: https://github.com/SortableJS/sortablejs