uni-app引入sortable列表拖拽，兼容App和H5

<template>
	<view class="sort" id="sort">
		<view class="sort-item" :data-id="item" v-for="item in types" :key="item">{{item}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				types: ["语文", "数学", "英语", "历史", "政治"]
			}
		},
		methods: {
			changeSort(e) {
				console.log(e)
			}
		}
	}
</script>

<script module='sortable' lang="renderjs">
	export default {
		mounted() {
			this.initSortable()
		},
		methods: {
			initSortable() {
				if (typeof window.Sortable === 'function') {
					this.setSortable()
				} else {
					const script = document.createElement('script')
					script.src = 'static/js/sortable.min.js'
					script.onload = this.setSortable.bind(this)
					document.head.appendChild(script)
				}
			},
			setSortable() {
				let option = {
					animation: 150,
					onEnd: (e) => {
						// 拖拽完成后回调
						this.$ownerInstance.callMethod('changeSort', sortable.toArray());
					}
				}
				let sortable = Sortable.create(document.getElementById('sort'), option);
			},
		}
	}
</script>

<style lang="scss">
	.sort {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		&-item {
			width: 200rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 15rpx;
			background: #f5f5f5;
			margin: 5rpx;
		}
	}
</style>