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

先上图，项目需求需要拖拽排序。


因为之前有做过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地址。链接